I am new to web development and am struggling to achieve what I would like for my first site and after over 2 hours of research and testing of the different CSS properties I find, I am still not getting anywhere.
What I want is probably quite simple really. I would like to use an image as a background image and need it to stretch horizontally and/or vertically, as required, to fit the user's viewport and then stay like that regardless of the contents, exactly as shown here : https://css-tricks.com/examples/FullPageBackgroundImage/progressive.php
The image is the following :
I found on a lot of sites that I should just use the ''background-size: cover;'' property. But in my case I get this :
which is not what I would like since we can no longer see the top or bottom of the background.
The closest I get is using the background-size:contain property but doing so the picture fits vertically but not horizontally, as seen here : Contain
Now what I need is for it to stretch horizontally but I am not getting it.
My picture's original size was quite large but as it was too big when I used the cover property, I resized is 1920 x 1080 which I found seems to be the recommended ratio for background images.
Is there a way to achieve what I would like?
The code I have so far is the simplest there is :
html {
width: 100%;
height: 100%;
background-image: url(https://i.stack.imgur.com/3Xdg1.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
<title>Test</title>
</head>
<body>
</body>
</html>I had tried resetting the default styling, in case the oversizing I experienced using :cover was due to that but it did not help.
Thank you for your help
CodePudding user response：
To fit the image in the background fully, you can use the following property.
background-size: 100% 100%;
This will set both width and Height as 100%.
CodePudding user response：
To stretch the image to fill the entire area add the following properties
width: 100%;
background-image: url('bdg.jpg');
background-size: 100% 100%;
CodePudding user response：
Try using the 'contain' property to see if it achieves what you need.
html{
width:100%;
height:100%;
background-image: url(bgd.jpg);
background-position: center;
background-repeat: no-repeat;
background-size:contain;
}CodePudding user response：
Copy and paste the HTML and CSS code from the site and figure out what's exactly not working.
In this case, just add the correct "links" to your image and it should operate the way you want.
Why does it work? Because of the css nesting and properties. But that's a step down the road from where you are at this point. Get the full picture and mess about, this is easier than it seems.
Again, you can view any websites source code by just right clicking in the browser and selecting "view page source" or the equivalent. The design aspects are completely out in the open. It's the best way to learn.
This is the page source from the site that you're trying to replicate. The images arent there in the background, but just add the hyperlink:
** Edit I added the hyperlink to you're image **
https://i.stack.imgur.com/3Xdg1.jpg
<html>
<head>
<meta charset="UTF-8">
<title>Full Page Background Image | Progressive</title>
<style>
* { margin: 0; padding: 0; }
html {
background: url(https://i.stack.imgur.com/3Xdg1.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#page-wrap { width: 400px; margin: 50px auto; padding: 20px; background: white; -moz-box-shadow: 0 0 20px black; -webkit-box-shadow: 0 0 20px black; box-shadow: 0 0 20px black; }
p { font: 15px/2 Georgia, Serif; margin: 0 0 30px 0; text-indent: 40px; }
</style>
</head>
<body>
<div id="page-wrap">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
<style type="text/css" style="display: none !important;">
* {
margin: 0;
padding: 0;
}
body {
overflow-x: hidden;
}
#demo-top-bar {
text-align: left;
background: #222;
position: relative;
zoom: 1;
width: 100% !important;
z-index: 6000;
padding: 20px 0 20px;
}
#demo-bar-inside {
width: 960px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
#demo-bar-buttons {
padding-top: 10px;
float: right;
}
#demo-bar-buttons a {
font-size: 12px;
margin-left: 20px;
color: white;
margin: 2px 0;
text-decoration: none;
font: 14px "Lucida Grande", Sans-Serif !important;
}
#demo-bar-buttons a:hover,
#demo-bar-buttons a:focus {
text-decoration: underline;
}
#demo-bar-badge {
display: inline-block;
width: 302px;
padding: 0 !important;
margin: 0 !important;
background-color: transparent !important;
}
#demo-bar-badge a {
display: block;
width: 100%;
height: 38px;
border-radius: 0;
bottom: auto;
margin: 0;
background: url(https://i.stack.imgur.com/3Xdg1.jpg) no-repeat;
background-size: 100%;
overflow: hidden;
text-indent: -9999px;
}
#demo-bar-badge:before, #demo-bar-badge:after {
display: none !important;
}
</style>
</body>
</html>