CODEWITHSUNDEEP
htmlcssimageheaderwidth
Jen
Jen

Reputation: 101

How to make a background header image extend to full width of browser

Still learning how CSS works. At the moment I'm trying to make a background image cover the entire header without any gaps on the top/right/left sides.

I have tried several other options and I can't seem to get this image to move.

(i.e adding in html but I want to keep that separate from that file. I have also tried making the margins 0)

<!--EXAMPLE1-->
.splash_img {
background-repeat:no-repeat;
background-position: center top;
display:block;
margin:0px auto; 
}

<!--EXAMPLE2-->
.splash_img:{   
background-image:url("Images/bakemock.jpg") no-repeat center;
background-size:100% 100%; 
height:630px; 
}

It continues to stays on the top right corner of the browser. Currently this is what I have.

<head> 
    <div class="splash_img">
        <img src="Images/bakemock.jpg" alt="bake"/>
    </div>
</head>

.splash_img:{   
background-image:url("Images/bakemock.jpg") no-repeat center;
background-size:100% 100%; 
height:630px;
}

Upvotes: 4

Views: 28069

Answers (3)

Jaqen H&#39;ghar
Jaqen H&#39;ghar

Reputation: 16804

These lines:

<head> 
   <div class="splash_img">
     <img src="Images/bakemock.jpg" alt="bake"/>
   </div>
</head>

Cannot work.

You cannot put html elements like <div> <img> and many others inside the <head> tag. Your builder tags should be inside the <body> only. And the <body> cannot have a <head> tag inside it.

Two possibilities

  1. If this section is inside the <body> and is not refering to the <head> above the <body> then change it to <header> or something like that
  2. If this section is above the <body> delete the html elements inside it and put a <header> tag inside your <body> section

A valid HTML should look something like this:

<!DOCTYPE html>
<html>
<head>
   <title>Some title</title>
   <!-- meta tags, js scripts, css styles etc -->
</head>
<body>
   <!-- div tags, spans, imgs, etc are ok -->
   <!-- but you cannot put a <head></head> tag here -->
</body>
</html>

Also important note

You cannot put background-image: and specify more than the background image src itselt. If you want to specify more than the source use background: instead

background: url("/Images/bakemock.jpg") no-repeat center;

The last thing is of course the default paddings/margins that the browsers give to the <html> and <body> tags that you should override:

html, body {
   padding:0px;
   margin:0px;
}

In conclusion

This code will work for you

<!DOCTYPE html>
<html>
<head>
    <title>Some title</title>
    <style>
        header {
            background: url("/Images/bakemock.jpg") no-repeat center;
            background-size: 100% 100%;
            height: 630px;
        }
        html, body {
            padding:0px;
            margin:0px;
        }
    </style>
    <!-- meta tags, js scripts, css styles etc -->

</head>
<body>
    <!-- div tags, spans, imgs, etc are ok -->
    <!-- but cannot put a <head></head> tag here -->
    <header>
    </header>
</body>
</html>

You can see it also here:

JSFiddle

Hope it helps. If you have any questions please tell me.

Upvotes: 5

RasmusGlenvig
RasmusGlenvig

Reputation: 765

You can do like this:

HTML:

<div class="splash_img">
    <img src="Images/bakemock.jpg" alt="bake"/>
</div>

CSS:

.splash_img {
  background: url(Images/bakemock.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Upvotes: 2

keziah
keziah

Reputation: 574

Or you can use the background property

<style>
/* basic reset */
* {margin: 0;padding: 0;}

.header {
    background: url('Images/bakemock.jpg') no-repeat; /* you may also change the URL */
    background-size: 100% 100%;
    width: 100%;
    display: inline-block;
    height: 200px; /* you may also change this */
}
</style>

<header class="header"></header>

absolutely no spaces and gaps

Upvotes: 0

Related Questions