vidmarc Posted April 11, 2016 Share Posted April 11, 2016 Looking at the code, the area is listed as div id="header-container". Can anybody help me to add a background image? Quote Link to comment Share on other sites More sharing options...
bsmither Posted April 11, 2016 Share Posted April 11, 2016 In the Blueprint skin file /css/header.css, find near line 98: #header-container .box-session .content { position: relative; } Add ABOVE: /* Remove .box-session for wider distribution of image */ #header-container .box-session { background: url(../images/patterns/fabric_light.jpg); } Quote Link to comment Share on other sites More sharing options...
vidmarc Posted April 11, 2016 Author Share Posted April 11, 2016 This is what I now have, but no background image is appearing... /* Top Session */ #upper_header .box-session { float: right; margin-right: 1.5em; position: relative; z-index: 601; } /* Remove .box-session for wider distribution of image */ #header-container .box-session { background: url(../images/logos/TwitterHead.jpg); } #header-container .box-session .content { position: relative; } Quote Link to comment Share on other sites More sharing options...
bsmither Posted April 11, 2016 Share Posted April 11, 2016 Please check the spelling the /logos/ folder name. My copy of Blueprint (v1.5) has /logo/. Also, I get the impression that TwitterHead.jpg may be a non-repeatable image. If so, you may need to make this property: background: url(../images/logos/TwitterHead.jpg) no-repeat; Quote Link to comment Share on other sites More sharing options...
vidmarc Posted April 11, 2016 Author Share Posted April 11, 2016 Thanks, but still no luck... http://www.nucleusfilms.com/ Quote Link to comment Share on other sites More sharing options...
bsmither Posted April 11, 2016 Share Posted April 11, 2016 Ok, this has actually focused on the session box. So, make it: From: /* Remove .box-session for wider distribution of image */ #header-container .box-session { background: url(../images/logo/TwitterHead.jpg); } To: #header-container { background: url(../images/logo/TwitterHead.jpg); } Quote Link to comment Share on other sites More sharing options...
vidmarc Posted April 11, 2016 Author Share Posted April 11, 2016 Thank you! It now works perfectly. Would you happen to know the exact size background image I should be using? Quote Link to comment Share on other sites More sharing options...
bsmither Posted April 11, 2016 Share Posted April 11, 2016 Because it is a background image, the display of it is suppose to repeat to cover the area it is in -- especially if that area changes if the width of the browser window is different from visitor to visitor, or the visitor changes the width of the browser.. As such, there will be no "appropriate size". Quote Link to comment Share on other sites More sharing options...
vidmarc Posted April 11, 2016 Author Share Posted April 11, 2016 I think it might be wiser if I made the image smaller, and had it set to repeat. What do you think? Quote Link to comment Share on other sites More sharing options...
bsmither Posted April 11, 2016 Share Posted April 11, 2016 That works. But the background image is crazy busy. I would not even have noticed the logo and login box. Quote Link to comment Share on other sites More sharing options...
vidmarc Posted April 11, 2016 Author Share Posted April 11, 2016 That's just a test image - the final image will be much darker. If I use a smaller image, how do I make it repeat? Quote Link to comment Share on other sites More sharing options...
bsmither Posted April 11, 2016 Share Posted April 11, 2016 The browser will repeat it, unless the CSS rule says otherwise: repeat property Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.