Image in background, white middle column

[murdoc_tcc]

hi Running presta1.6.0.14

 

I have an image for the background which works, this is the code I used off a youtube clip

body, #page, .columns-container{
	background: #000 url('http://blablabla.bla/images/background.jpg')!important;
}

now want middle column white, where do I change it so middle column is white

Edited August 8, 2017 by murdoc_tcc (see edit history)

[Scully]

Try to use youre image in the

 

.header-container

 

instead of body.

[murdoc_tcc]

Hi, I changed the code to

.header-container, #page, .columns-container{
	background: #000 url('bla/images/background.jpg')!important;
}

nothing happened

 

Changed it to this then

.header-container, .columns-container{
	background: #000 url('blaimages/background.jpg')!important;
}

nothing happened

.header-container{
	background: #000 url('blaimages/background.jpg')!important;
}

changed it to that and it is totally black

Edited August 9, 2017 by murdoc_tcc (see edit history)

[Scully]

Revert back. You could try to add additional CSS code to apply for the class container and there make the background white.

Which means: Leavy body as you had and add one more CSS rule for the container shown below which must have white (or another color) as background color set. This is where the products or detail data starts:

<div id="columns" class="container">

Edited August 9, 2017 by Scully (see edit history)

[murdoc_tcc]

how do I place that in global

[murdoc_tcc]

Hey can, someone please explain to me how to do this, in a simple manner.

 

its the only thing outstanding on my little shop

[Scully]

You haven't even posted a link to your site? Might be easier. Why are you almost always assuming that we can guess everything?

[murdoc_tcc]

http://wickedwebwizard.net/onlineshop/

 

thought it is a general question lol

 

here is the link to the site

[Scully]

I'd still say the following class container needs background color white.

I'f try to add it into global.css but ONLY for the class container.

<div class="container">

Edited August 12, 2017 by Scully (see edit history)

[murdoc_tcc]

 

I'd still say the following class container needs background color white.

I'f try to add it into global.css but ONLY for the class container.

<div class="container">

 Hey Scully, I dont know what you mean by this, where do I change the class="Container"

 

 

[Scully]

Change global.css - add ad a rule for class named container and set a background color there. Color code #FFF is for white.

Edited August 13, 2017 by Scully (see edit history)

[murdoc_tcc]

Hello, OK

 

that worked, BUT it messed up the header and a couple, have a look,

 

this is the code I used

div.container {
    background: #ffffff;

} 

so now just need to make the center column a bt bigger because popular nav bar is sticking out on the left, and the top nave bar needs to be the red color

[murdoc_tcc]

Hi,

 

So I have fixed the backgrounds, as you can see by this link, http://wickedwebwizard.net/onlineshop/content/4-about-us

 

BUT, the content and the one menu is veerign to the left now, and all the content, how do I can it to get that back to proportion

[Scully]

Try to learn some basics for CSS files. If you add rules, there are read from the beginning to the end. The last rule appiles if there are any overlapping rules.

container is already defined at appx. line 549 in this secion where your new rule is applied at appx. line 5483:

.container {
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px; }
  .container:before, .container:after {
    content: " ";
    /* 1 */
    display: table;
    /* 2 */ }
  .container:after {
    clear: both; }

Furthermore - your background adds appx. 1 MB of size to your site which is a lot. You can also use only one small file instead an use the property background-repeat:

 

https://www.w3schools.com/cssref/pr_background-repeat.asp

Edited August 15, 2017 by Scully (see edit history)

[murdoc_tcc]

Hi Scully,

.container {
 background: #ffffff;	
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px; }
  .container:before, .container:after {
    content: " ";
    /* 1 */
    display: table;
    /* 2 */ }
  .container:after {
    clear: both; }

I have changed it, it works fine, just have the problem with the content that is still close on the border.

 

as for the background Ill need to choose a different picture, that will flow into each other