You are viewing our Forum Archives. To view or take place in current topics click here.
Looking for Experienced Web Designers for help
Posted:

Looking for Experienced Web Designers for helpPosted:

MushroomElm
  • V5 Launch
Status: Offline
Joined: Sep 18, 201113Year Member
Posts: 3,025
Reputation Power: 134
Status: Offline
Joined: Sep 18, 201113Year Member
Posts: 3,025
Reputation Power: 134
I'm looking to finally start my Website. I took Webdesign for a few years in High School and I've always wanted to make my own portfolio. As of right now, I'm having trouble with my Background image. I'd like to get the image to stretch across the screen perfectly.

Anyone know how to do that? Every tutorial I've found stretches and distorts it.
#2. Posted:
ObscureCoder
  • Resident Elite
Status: Offline
Joined: Jun 29, 201311Year Member
Posts: 211
Reputation Power: 13
Status: Offline
Joined: Jun 29, 201311Year Member
Posts: 211
Reputation Power: 13
You need to make sure your image is reasonably dimensioned and preferably JPEG (lower quality but often smaller filesize than PNG).

Then do like:
background: url('path/to/image.jpg') no-repeat center center fixed #000;
background-size: cover;

If that distorts it, it's your image that is the problem.
#3. Posted:
MushroomElm
  • V5 Launch
Status: Offline
Joined: Sep 18, 201113Year Member
Posts: 3,025
Reputation Power: 134
Status: Offline
Joined: Sep 18, 201113Year Member
Posts: 3,025
Reputation Power: 134
ObscureCoder wrote You need to make sure your image is reasonably dimensioned and preferably JPEG (lower quality but often smaller filesize than PNG).

Then do like:
background: url('path/to/image.jpg') no-repeat center center fixed #000;
background-size: cover;

If that distorts it, it's your image that is the problem.


What would be a good image size? I did 1Kx1K Pixels.
#4. Posted:
Ripz
  • Ladder Climber
Status: Offline
Joined: Nov 12, 201113Year Member
Posts: 356
Reputation Power: 15
Status: Offline
Joined: Nov 12, 201113Year Member
Posts: 356
Reputation Power: 15
I agree with @MushroomElm

However using a background cover doesn't always work across all browsers/mobile devices.

Using the CSS:


html-element {
  background: url(images/bg.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}


Should do the trick.

As for the size of your image, it really depends on where this will be going and the area you want the image to cover; if it is a full screen cover then you will probably want to go for a 16:9 aspect ratio.
#5. Posted:
ObscureCoder
  • Resident Elite
Status: Offline
Joined: Jun 29, 201311Year Member
Posts: 211
Reputation Power: 13
Status: Offline
Joined: Jun 29, 201311Year Member
Posts: 211
Reputation Power: 13
Ripz wrote I agree with @MushroomElm

However using a background cover doesn't always work across all browsers/mobile devices.

Using the CSS:


html-element {
  background: url(images/bg.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}


Should do the trick.

As for the size of your image, it really depends on where this will be going and the area you want the image to cover; if it is a full screen cover then you will probably want to go for a 16:9 aspect ratio.


You agree with me then? GG. You just posted what I posted.
#6. Posted:
Sys
  • 2 Million
Status: Offline
Joined: Dec 30, 201311Year Member
Posts: 1,331
Reputation Power: 69
Status: Offline
Joined: Dec 30, 201311Year Member
Posts: 1,331
Reputation Power: 69
<meta name="viewport" content="width=device-width, initial-scale=1.0">


I would try setting that in the top of your HTML. It may sort some of the distortion and will make your site more responsive.

-FMWK
#7. Posted:
Ripz
  • Ladder Climber
Status: Offline
Joined: Nov 12, 201113Year Member
Posts: 356
Reputation Power: 15
Status: Offline
Joined: Nov 12, 201113Year Member
Posts: 356
Reputation Power: 15
ObscureCoder wrote
Ripz wrote I agree with @MushroomElm

However using a background cover doesn't always work across all browsers/mobile devices.

Using the CSS:


html-element {
  background: url(images/bg.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}


Should do the trick.

As for the size of your image, it really depends on where this will be going and the area you want the image to cover; if it is a full screen cover then you will probably want to go for a 16:9 aspect ratio.


You agree with me then? GG. You just posted what I posted.


Scroll down on the code. I added a bit.
#8. Posted:
ObscureCoder
  • Resident Elite
Status: Offline
Joined: Jun 29, 201311Year Member
Posts: 211
Reputation Power: 13
Status: Offline
Joined: Jun 29, 201311Year Member
Posts: 211
Reputation Power: 13
Ripz wrote
ObscureCoder wrote
Ripz wrote I agree with @MushroomElm

However using a background cover doesn't always work across all browsers/mobile devices.

Using the CSS:


html-element {
  background: url(images/bg.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}


Should do the trick.

As for the size of your image, it really depends on where this will be going and the area you want the image to cover; if it is a full screen cover then you will probably want to go for a 16:9 aspect ratio.


You agree with me then? GG. You just posted what I posted.


Scroll down on the code. I added a bit.


Meh, browser specific properties aren't much of an issue in newer versions of browsers.
Jump to:
You are viewing our Forum Archives. To view or take place in current topics click here.