Grow your CSS skills. Land your dream job.

Image background problems (newb)

  • # March 12, 2013 at 4:37 pm

    Hello Forum!

    I am having the biggest troubles getting my image to fit the background without being stretched on the browser. Please any help concerning this code and how it should be set would be greatly appreciated! I’ve been trying a million different scripts and tricks and nothing has yielded results for me yet.

    # March 12, 2013 at 4:50 pm

    Background-size:cover is doing what you tell it too…as far as I can tell.

    Could you put something in Codepen?

    # March 12, 2013 at 4:54 pm

    I don’t understand what it is exactly what you’re after. But if it’s a full width image you can try:

    styled like

    img { width: 100%; }

    Don’t know how you can have full width background without cropping or stretching.

    # March 13, 2013 at 1:58 pm

    Sorry for the vagueness. I am just making a “Under Construction/Landing Page” And I’m trying to get my image to be the background and not stretched out. But, it keeps showing up blown up and stretched every time I try setting it as my image for the background. The landing page is fairly simple just need help getting the background image correct. I have attached all the code involved for the landing site! I REALLY appreciate you guys and your help!!!

    < !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">







    Please check back soon.

    Access Code:


    # March 13, 2013 at 5:10 pm

    @basmith23 you are using a square image 1000px high x 1000px wide. When viewed on a browser window, lets say, 1400px wide, what do you want the image to do? It has to either stretch or enlarge to cover the window. Unless you want the image to repeat? Or do you not want to cover the background fully?

    Try changing the background size to ‘contain’ – maybe you want this effect?

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".