Jump to content

Blueprint skin - add background header image?


vidmarc
 Share

Recommended Posts

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);
}

 

Link to comment
Share on other sites

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;
}	

 

Link to comment
Share on other sites

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;

 

Link to comment
Share on other sites

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);
}

 

Link to comment
Share on other sites

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".

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...