[SOLVED] Image Positioning

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
 

Attachments

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?
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;
}
 
We can but try!

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

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
 

Attachments

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. Great.gif
 
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
 
Tekno Venus said:
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
Click to expand...

Corrine said:
Teaplease, do we get to see a screen capture of the finished product?
Click to expand...

Certainly will & thanks again!

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

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

(Shouldn't Sysnative be at the top of the list? :D Hmmm, I don't see SG, which brought you here in the first place ;) ).
 
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.
 
Back
Top