CSS Background anomaly

437 Posts

distant_smile Reply #1, 10 years, 6 months ago

I changed my background yesterday for my site. In full screen mode the bground covers the width but not the height. When the browser window is reduced to say 50%, there is a large white margin on the right and the bottom is still unfilled. Please see here:

http://www.pawsforwildlife.co.uk/archives/

But the homepage is fine on both 100% and reduced window size. I have checked through my CSS and cannot find the problem. My wrapper CSS is:

#wrapper-1 {
    display: table;
    position: relative;
    width: 100%;
    background: transparent url(../images/page-bg.png) repeat-x scroll left top;
}

#page {
    min-height: 499px;

Can anyone see what I have done? It's driving me crazy lol

www.PawsForWildlife.co.uk
www.Borntobrick.co.uk

953 Posts

iusemodx Reply #2, 10 years, 6 months ago

I can't replicate the problem, but would suggest less CSS:

#wrapper-1 {
    display: table;
    position: relative;
    width: 100%;
    background:url(../images/page-bg.png) repeat-x;
}

Just a mo:

You are repeating the image solely on the x-axis, which means - if your browser window is larger than the background image (1032px), the white background becomes visible

My suggestion - the image is by the looks of things supposed to create some form of pattern, I use high-end monitors and was only able to see the pattern in Photoshop by heavily enlarging it

I would personally drop the image and use a solid background colour, your image uses transparency, which if realy needed can be replicated using rgba, eg.

#wrapper-1 {
    display: table;
    position: relative;
    width: 100%;
    background-color:rgba(0,0,0,.5);
}

Download the latest Evo release
Report an issue about Evo
Read the Evo documentation

437 Posts

distant_smile Reply #3, 10 years, 6 months ago

Hi iusemodx, thanks for the suggestion. I tried the second css style you suggested and the background appears as a mid-grey color? and there is still a small white right-hand margin. When I inspect the element I see:

.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12, .grid_13, .grid_14, .grid_15, .grid_16 {
display: inline;
float: left;
position: relative;
margin-left: 10px;
margin-right: 10px;
}

If I uncheck the margin left and margin right it appears to correct it, but I wanted to check as I am new to the whole 'grid' system. Thank you

www.PawsForWildlife.co.uk
www.Borntobrick.co.uk

953 Posts

iusemodx Reply #4, 10 years, 6 months ago

The "rgba" is there as an example - you will have to find the RGB value yourself

Example:
White: 255,255,255
Black: 0,0,0

using rgb:

rgb(255,255,255)

using rgb with alpha transparency / channel:

rgba(255,255,255,.5)

The ".5" determines how transparent the colour should be - goes from "0" to "1"

Removing the grid margins isn't the solution.

Just out of interest - why don't you add the background to the body tag, instead of #wrapper-1, that way you won't get any white flashes anywhere ?

You could even add it to HTML

Example:

html{
    background-color:rgba(0,0,0,.5);
}

or

body{
    background-color:rgba(0,0,0,.5);
}

Take a look at the attached image - its the colour picker from Photoshop, simply shows where to get the RGB value from, as well as other values

You may also want to take a look at the colour picker on w3schools [ed. note: iusemodx last edited this post 10 years, 6 months ago.]

Download the latest Evo release
Report an issue about Evo
Read the Evo documentation

437 Posts

distant_smile Reply #5, 10 years, 6 months ago

Thank you, I dont know why I was applying it to the wrapper element? I have now changed to:

body{
    background-color:rgba(0,0,0,.5);
}

I stuck with the transparent black as I actually like it better than my old background!

www.PawsForWildlife.co.uk
www.Borntobrick.co.uk

437 Posts

distant_smile Reply #6, 10 years, 6 months ago

Sorry one last thing. Everything seems great now although on this page:

http://www.pawsforwildlife.co.uk/blog/

there is still a large right margin. I have checked through the elements and can't pinpoint it. The homepage is fine it is just all the inner pages?

www.PawsForWildlife.co.uk
www.Borntobrick.co.uk

953 Posts

iusemodx Reply #7, 10 years, 6 months ago

I can't replicate your problem, sorry and to be honest, I am not sure where the margin is supposed to "not be".

What browser are you using (including version number) ?
Can you create a screenshot showing the problem ?

Download the latest Evo release
Report an issue about Evo
Read the Evo documentation

437 Posts

distant_smile Reply #8, 10 years, 6 months ago

Hi, the issue is when the browser window is resized. The left margin is about 10px, but the right is stuck at about 30px?

I am using Goodle Chrome version Version 48.0.2564.116 m
Thanks

www.PawsForWildlife.co.uk
www.Borntobrick.co.uk

953 Posts

iusemodx Reply #9, 10 years, 6 months ago

Just taken a look at the site but you seem to be modifying the CSS, as the right column is now underneath the content area and as such, I can't test the margin problem.

My honest opinion to the template you are using - it's outdated, uses realy old scripts that have since release been updated multiple times and it's using an old 960 fixed width grid system.

And it uses files that are probably nowadays not even needed, or at least not needed for your use

Wouldn't it be better to take the design and code it new or go for a responsive template from one of the many free template sites out there ?

Download the latest Evo release
Report an issue about Evo
Read the Evo documentation

953 Posts

iusemodx Reply #10, 10 years, 6 months ago

Just for info

If you were to start the template from scratch - you would create a cleaner better coded site

I have a copy of the rendered HTML source code and have just looked at it - it contains a lot of code that's no-longer required for modern browsers, not only that it still uses a PNG fix for older versions of internet explorer

It's OTT with clearing divs that could be gotten rid of by using modern self clearing CSS, the list goes on - I haven't even taken a closer look at the tons of CSS files that come with it

I can hear everyone saying now "not everyone can code" and so live with what they have, but thats what the community is there for - to help each other as best we can

Download the latest Evo release
Report an issue about Evo
Read the Evo documentation