Help with background image of main tag

Hello im trying to fit image for main tag perfectly in but i cant make it work. First, it wont resize properly, its put verticaly instead of horizontaly how it was supposed to be, changing dimensions in photoshop didnt help. Using height: 100% instead of padding-bottom: 100% is not working, same for width: 100%. Any ideas how it perfectly fit image as background for individual section on web site? Also how to get rid of space between blue background of navigation and background image of main tag?
Here’s my html:

<!doctype html>
<html lang="en">
<head>
    <title>HTML Stranica</title>
    <meta charset="utf-8">
    <link rel=stylesheet type="text/css" href="style.css">
</head>

    <body>
        
        <div id="wrapper">
            
            <nav>
                <h1 id="logo"><a id="logostyle" href="#">ISMAR HTML SITE</a></h1>
                
                <ul id="navigation">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Portfolio</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
                
            </nav>
        
            <main>
                <div id="content1">
                    <h2>THE ART OF FOOD</h2>
                    <h3>Photography</h3>
                    <button>View More</button>
                </div>
                
            </main>
        </div>
        
        
    </body>

</html>

CSS:

body {
    font-family: sans-serif;
    background-color: azure;
}

nav {
   background-color: blue;
    height: 50px;
}

nav h1#logo a {
    text-decoration: none; 
    float: left;
    margin-left: 50px;
}

nav h1#logo a#logostyle {
    color: black;
    font-weight: normal;
}

nav #navigation {
    list-style: none;
}

nav #navigation a {
    text-decoration: none;
    float: right;
    margin-right: 50px;
    margin-top: 8px;
    color: black;
}

nav #navigation a:hover {
    color: gray;
}

main {
    margin-right: 50px;
    margin-left: 50px;
    padding-bottom: 100%;
    background-image: url("Images/food.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}

Image of my website:

I’m not 100% sure I understand what you want your image to do, but right now, the main element has margin-left and margin-right set to 50px, which is why the image does not stretch across the screen.

The reason for the space between nav and main is that h2 has a top margin. You can fix this by either resetting the top margin, or giving main some padding so that the h2 is lower.

You have some redundant HTML. You don’t need the “wrapper” div because you only have two main content sections, nav and main, and they stretch horizontally across the page.

The “logostyle” id is also redundant, because you’ve already given the h1 an id. The “View More” button should preferably be a button or just a regular text link.

1 Like

Thank you for your reply. I havent been using html css for like a year almost so i lost some feeling of writing code. Yeah i wanted my image to be flipped horizontaly and now it works fine without those margins even though transform rotate worked well too, but ill keep it this way without margins now. And thanks for letting me know about html part i’ll work on that too, i will change id names and some tags later on…

One thing that helps me out a lot when it comes to layouts is using the developer tools (Ctrl + Shift + J on Chrome) and then the element inspector (Ctrl + Shift + C).

This lets me see the various CSS rules for various elements. You can edit CSS rules right in the inspector, and they will be reflected on the page. The changes are temporary and will go away if you refresh the page.

2 Likes