Solved

CSS question: how to stretch an image to full screen width

Posted on 2015-02-20
3
85 Views
Last Modified: 2015-02-20
I've been having trouble with this one. I need to stretch an image to the full width of a screen, no matter what screen resolution. I am pretty sure I can do that with CSS.

Here is the web site: http://www.leafyhead.com/

In the header area you can see the logo image. I'd like to stretch that image to whatever the width of the screen is.

Does the image need to be a background image?

Is there a CSS style that will do what I need?

Thanks as always for your help.

Eric
0
Comment
Question by:Eric Bourland
  • 2
3 Comments
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 500 total points
ID: 40621604
Just use background-size:cover for the CSS of the element where you are using it.

Cd&
0
 
LVL 3

Author Comment

by:Eric Bourland
ID: 40621613
Got it. I was looking for that. =) I'll go try it now. Thank you!
0
 
LVL 3

Author Closing Comment

by:Eric Bourland
ID: 40621701
Thanks for pointing this out to me. =)
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…

829 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question