Jump to content

Completely Altering the Background


Guest neuroinquisitor
 Share

Recommended Posts

Guest neuroinquisitor

There seems to be multiple files everywhere that need altering in order to completely change the background of the classic skin. Right now I got rid of the cubecart initial logo, and managed to make the entire top half of the background black, but the lower is still grey!

How can I completely change the background, not the layout. Thanks.

Link to comment
Share on other sites

Guest neuroinquisitor

Here's the thing. I did change the pagesurround image to a black image, however, only the top half of the background has become black, the bottom is still grey...thats whats odd. Is there something else to change?

Link to comment
Share on other sites

Thank you neuro . . .

In layout.css, REPLACE this code:

body {	

	margin: 5px;

	background-color: #A5A5A5;

	background-attachment: scroll;

	background-image: url(../styleImages/backgrounds/pageBg.jpg);

	background-repeat: repeat-x;

	background-position: top;

}

#pageSurround {

	width: 748px;

	margin: 0px auto;

	padding: 5px;

	border: 2px solid #CCCCCC;

	background-color: #FFFFFF;

	background-image: url(../styleImages/backgrounds/contentBg.jpg);

	background-repeat: no-repeat;

	background-position: left top;

}



With this:




body {	

	margin: 5px;

	background-color: black;

}

#pageSurround {

	width: 748px;

	margin: 0px auto;

	padding: 5px;

	border: 2px solid #CCCCCC;

	background-color: black;

}

Link to comment
Share on other sites

Can somebody tell me how can I add a background image for a 'page'

NOT pagesurround.

You can see it my store back ground is 000080 but I'll like to use a backgroud there.

I'm using for layout of my site, my forum, my top list... made by me backgroud

but I can't add it to Store :-(

How do I do that?

Link to comment
Share on other sites

To add a background image to an element, use this syntax:

element {

    background-image: url(../styleImages/backgrounds/image_name.ext);

}

Where element = an html element like body, div or a class or id selector that goes with such an element . . .

Where image_name.ext = the actual name of the image and its extension (.gif, .jpg, .png, etc.) which you have uploaded to the skin's backgrounds folder.

For more information on addding background images, please study here:

http://www.w3schools.com/css/pr_background-image.asp

and here:

http://www.w3schools.com/css/css_background.asp

@ Feldon, try adding your background to the body tag. In the second link given above, scroll down and see the other properties to use with this for placing a background, scrolling, etc.

If you want your body background image to show through other elements, like the pageSurround division, then you must delete background images and background colors for those elements, or set the images to : none; and the colors to : transparent;

HTH

Link to comment
Share on other sites

i am having trouble changing ALL the background. For instance, if I change the color of the "killer" theme to black, everything turns to black EXCEPT around the tabs and little table boxes.

Is there another area that I need to change the color to or is this because of the table properties somewhere??? Thanks!!

Link to comment
Share on other sites

To add a background image to an element, use this syntax:

Thanks. Stupid me!

I changed that already at the bigin and I was thinking that it donsen't work but my image size was

now good, my background was 000080 so I couldn't see that it was wel there ;-)

Sorry and thank you for your help.

Link to comment
Share on other sites

  • 3 months later...
Guest shantiel

I am having the same problem with the grey box at the bottom but I want my background to be an image... this is what i have...

body {

	margin: 5px;

	background-color: #A5A5A5;

	background-attachment: scroll;

	background-image: url(../styleImages/backgrounds/becktile.jpg);

	background-repeat: repeat-x;

	background-position: top;

}

#pageSurround {

	width: 748px;

	margin: 0px auto;

	padding: 5px;

	border: 2px solid #CCCCCC;

	background-color: transparent;

	background-image: none:

	background-repeat: repeat;

	background-position: left top;

but I get my image on the top half and the bottom half of my page is grey.

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