/    Sign up×
Community /Pin to ProfileBookmark

Header background image

Copy linkTweet thisAlerts:
May 12.2015

I am a beginner and my problem is that I want to set an image as the background to my header section. I want it so that the h1, h2 and navigation sit on top of it. I tied adding it to the home but couldn’t get it where I wanted it so I tried adding it in the cs but then I couldn’t changed the height and width of it. I want it to be responsive and I have media queries in my cs. Do I need to change the image in photo shop to make it fit better or is there an easy fix for this?

to post a comment
CSS

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@NichardauthorMay 12.2015 — Damn auto correct. It should say that I tried adding it to the html not home
Copy linkTweet thisAlerts:
@fcomstocMay 14.2015 — If you are setting a background image to the header (or any div) it is easy to do in css, you can set its position, size, repeat, and alternate color(css3) in case the image doesn't fill it.

eg: background: #00ff00 url("smiley.gif") no-repeat fixed center;

background (alt color) (url) (repeat) (position)

http://www.w3schools.com/cssref/css3_pr_background.asp

You can also use the background-size property to force the image to fit in the space,

background-size: auto|length|cover|contain|initial|inherit;

http://www.w3schools.com/cssref/css3_pr_background-size.asp

Hope this helps, if you link the site or include the code it would be easier to figure it out,
Copy linkTweet thisAlerts:
@ramarjunMay 15.2015 — if u need add ur css file

.div{

background-image:url('image path/imagename');

if u need background color then add code

baackground-color:red;

padding :10px;

}
×

Success!

Help @Nichard spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.14,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...