CODEWITHSUNDEEP
javascripthtmlcssbackground-image
yogashi
yogashi

Reputation: 273

How to put a background image in a webpage with a header

What I have to begin with: http://jsbin.com/opokev/39

Problems

Requirements

I've asked questions before but have gotten mixed answers, I'm really struggling with this. I am trying to get something like the background image on livingsocial.com only difference being that I don't want my header to take over part of the image like theirs.

Upvotes: 1

Views: 1832

Answers (2)

Duncan Gravill
Duncan Gravill

Reputation: 4672

If it is a background then why are you adding it as an img?

CSS...

background:url("http://i53.tinypic.com/347a8uu.jpg" center top no-repeat;
background-size:cover;

Upvotes: 0

Jonah Katz
Jonah Katz

Reputation: 5288

I see your background image problem. You have it set as an image in a div. Why not get rid of that, and just apply the following to the css:

body {
background-image: http://i53.tinypic.com/347a8uu.jpg;
background-repeat:none;

}

Or if for some reason you need to keep it as a div, just get rid of position: absolute;

For the header, just add a div right after <body like so:

<div class="header_wrapper"></div>

And the css:

.header_wrapper {

width: 85px;
margin-left:auto;
margin-right:auto;
}

Upvotes: 2

Related Questions