[SOLVED] Image Positioning

[Tekno Venus]

Hi Teaplease,

Some good news, I have an answer.

Looking at the full code, I can now see exactly why my code didn't give the expected result for you. The contain attribute you used is designed to "Scale the image to the largest size such that both its width and its height can fit inside the content area" (W3Schools). There are a couple of different attributes you can use to set the background size. I'll link you to the W3schools page --> CSS3 background-size property.

The issue is this. The image you gave is a specific shape, and when the browser window is resized, the image remains in that shape - it is not stretched. When the resolution is increased more and more, the white area is increased further. The image is being enlarged proportionally, to it will enlarge by the same amount on each side. You will find as the resolution is increased further still, white space develops on the bottom. I noticed this at a resolution of 2011x996 - there was a large white area both sides. You can see what I mean here --> Playit

I tried using a 100% width, but that looked odd and the chromium logo was oddly stretched.

Increasing the grey space on either side of the image would be the easiest option here. I have attached a 1920px width version (I zipped it because for some reason vB compressed it when I uploaded it), I extended the grey area so the image is 1920px wide - the width of a 1080p screen. Then use your original code.

Does this different image work for you? If not, don't worry, I'll keep thinking.

Regards,
Stephen

 

[Teaplease]

That's much better,thanks.There's a very narrow white border at the bottom of the browser window but I can eliminate that by slightly adjusting the resolution of the image you've uploaded.
Just an afterthought that occured to me.Was wondering if it was possible to have 2 images separately.Say,a 100x100 png of the background colour F7F7F7 & the logo image overlaid,say with your suggested code?

body {    background: url(F7F7F7.png) repeat;
}
html { 
  background: url(chromium2.png) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

 

[Tekno Venus]

We can but try!

I have created a chromium4 image, which has a transparent background. Download that from the attachment and use this code:

body {
    background: #F7F7F7;
    background-image: url(chromium4.png); 
    background-repeat: no-repeat ;
    background-attachment: fixed;    
    background-size:  contain;
}

That will create a grey background and overlay the chromium logo on top. How does that look?

As always, if you have any issues, just ask! That's why I'm here. :)

Stephen

 

[Teaplease]

Cracked it!Thanks,Stephen is perfect now.Much appreciated.Looks great & just adding more bookmarks to it now & using with New Tab Redirect extension.Best regards,T.

 

[Tekno Venus]

Not a problem at all, glad I could help you. If you do have any further questions on HTML, CSS or JavaScript, feel free to ask.

Regards,
Stephen

 

[Corrine]

Teaplease, do we get to see a screen capture of the finished product?

 

[Teaplease]

Not a problem at all, glad I could help you. If you do have any further questions on HTML, CSS or JavaScript, feel free to ask.

Regards,
Stephen

Teaplease, do we get to see a screen capture of the finished product?

Certainly will & thanks again!

Absolutely,& complete with Sysnative bookmark,of course!(they drop down on mouseover)

 

[Corrine]

Looks very nice, Teaplease. Thank you for sharing the results.

(Shouldn't Sysnative be at the top of the list? Hmmm, I don't see SG, which brought you here in the first place ).

 

[Teaplease]

Thanks.
Haha,i knew you'd say that!I guess it should be.
However,fear not,SG is listed under 'three' & has been there for as long as i can remember.
I need to group the links a little better into more related sites under each heading,as you can see.

 

[Corrine]

Since "three" is my lucky number, that is absolutely perfect! :rose: