Grow your CSS skills. Land your dream job.

Background Picture

  • # December 28, 2012 at 6:02 pm

    Hello my dear coders.

    I have some basic experience in HTML/CSS and I started coding my portfolio website but I am already having a problem.

    I have a background image let’s say 2000px height and I want it to be displayed depending on the resolution the person visiting the website has but I don’t want it resized in any way and I don’t want a scroll bar. I want to see only 1200px let’s say if this is my resolution.

    If anyone can help it would be great and much appreciated.

    Please let me know if I need to explain better.

    Thank you very much.

    R.Mircu

    # December 28, 2012 at 6:20 pm

    It sounds like all you need is something like this:

    body {background:url(“your image path”) top center no-repeat;}

    This will keep the image static and won’t resize the background image at all, but if you have a larger screen, it will reveal more of the image.

    Hope that’s what you’re looking for.

    # December 28, 2012 at 10:05 pm

    @jkinney768 is right, although I would suggest creating a couple of different versions of the background in different sizes. Otherwise, users on mobile phones will still have to download a 2000x1400px image, which may be several mb in size. I would use media queries to swap out the different background images, like on this [Codepen](http://codepen.io/David_Leitch/pen/stKwi “http://codepen.io/David_Leitch/pen/stKwi”).

    # December 28, 2012 at 10:22 pm

    @david_leitch – You have to be going mobile first in your CSS to prevent desktop assets from downloading.

    # December 28, 2012 at 10:23 pm

    Sorry, my mistake :) Have fixed it now

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".