I have a sketch in pixels 1280 x 1024 and I want this sketch as background image of my html page and whatever else I show on the webpage will come on top of this image as div elements
I've seen this being done on many sites but when I put the image in the background it becomes so that I have o scroll the page horizontally.
Below is my css
body #background img {
left: 0;
min-width: 1024px;
position: absolute;
top: 0;
width: 100%;
z-index: -2;
}
<link rel="stylesheet" href="/stylesheets/style.css" type="text/css" media="screen" charset="utf-8">
<body>
<div id="background">
<img src="images/Sketch1.jpg">
</div>
</body>
Update
putting image in background with no-repeat cuts the image down.
I've put an example here: http://jsbin.com/ekaxum/2
body {
background: url(url_here) no-repeat;
-webkit-background-size: contain;
-moz-background-size: contain;
background-size: contain;
}
From the CSS 3 specification:
‘contain’: Scale the image, while preserving its intrinsic aspect ratio (if any), to the largest size such that both its width and its height can fit inside the background positioning area.
Hi Mike and welcome to Stackoveflow.
Just add the height:100%; property to the image's CSS style. The problem is that it's height is more than your actual window size so the vertical scrollbar appears. It changes the available window width and that's why you see the horisontal scrollbar.
Related
The full image is not displayed properly, the bottom of the image is missing, how can I display the full image on screen? (dimensions: 5904 * 4000 px)
I tried with object fit but its not working:
* {
margin: 0;
padding: 0;
}
header {
width: 100%;
height: 100vh;
background: url("adult-blur.jpg") center center no-repeat;
background-size: cover;
overflow: hidden;
object-fit: cover;
object-position: bottom top;
}
I also shared a video of this problem in facebook: here
You cannot have both:
The image show fully
Have the image cover the entire background
Remember that the image is of a fixed ratio and most screens will have a different ratio than your image not to mention differences in the actual viewable area (viewport) because of the browser toolbars and OS toolbars.
Your options are:
Have the image always be full-width using width:100%. This risks having a part of the image cut off at that bottom if it is taller than the viewport or having some white-space at the bottom if the image is shorter than the viewport.
Have the image always be full-height using height: 100%. This risks having a part of the image cut off at the right side if it wider than the viewport or some whitespace if it is not as wide as the viewport.
Use backgorund-repeat to have the image repeated vertically or horizontally to cover any whitespace.
Most other options you can find in CSS do a combination of the above options, with some additions like centering the image where there is white-space.
Most designers select the images with this in mind, choosing images that don't have any important details near the edges, and thus still look good if a small section is cut off at any end.
Check out this code:
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<style>
#body-container {
width: 100%;
height: 100vh;
background: url("j.jpg") center center no-repeat;
background-size: cover;
overflow-y: scroll;
}
</style>
</head>
<body>
<div id="body-container">
<!-- Place your document contents here -->
</div>
<body>
</html>
Here we used bootstrap-4. Put all contents of document body inside div container. In styles, background-size is used to make our image 100% in width n height. If it image stretches absurdly, you can also try background-size: cover.
Finally, overflow-y property is used to make our div scrolls vertically
I want to have my background as gradient and the image on top of the gradient, it worked just fine until I set overflow to auto since my div tag expands on mobile view which makes overflow hidden for the html tag not reliable so I made the image as a tag
.background_image {
position: absolute;
left: 0;
top: 0;
opacity: 0.3;
width: -webkit-fill-available;
height: -webkit-fill-available;
}
EDIT
I have made the image's position fixed so it keeps following the scroll position which wasn't exactly what I needed but It'll do.
EDIT 2
The problem was I was using linear gradient bg on behalf of the image which was a tag inside the body element, i fixed it by letting that image at fixed position and the change bg to radial gradient and making that gradient only styling the body tag which did solve the whole problem
Please check below code taken from here
body,
html {
height: 100%;
margin: 0;
}
.bg {
/* The image used */
background-image: url("https://via.placeholder.com/800");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="bg"></div>
<p>This example creates a full page background image. Try to resize the browser window to see how it always will cover the full screen (when scrolled to top), and that it scales nicely on all screen sizes.</p>
</body>
</html>
You can use the background with url property:
.background_image {
background: url(YOUR_IMAGE_URL) no-repeat center center fixed;
width: 100%;
height: 100%;
}
I've a series of img of the same size, now I would like that these image are overlayed, one on the other. For this I've set the position of the image to absolute, but in this way the problem is that the container have not the right size because the image are absolute positioned...
Furthermore the images must be resizable according to the browser size
Someone know a solution for insert some images overlayed?
<html>
<head></head>
<body>
<div id="container">
<img src="image1" />
<img src="image2" />
<img src="image3" />
</div>
</body>
</html>
the div container must obtain the size of the 3 img, all img have the same size, and must be overlayed each other...
The trick is to set only one of them to be relative by using something like
#container img:first-of-type {
position:relative;
}
The relative image will set the size, and the absolute ones will just lay on top (or behind) even if you re-arrange the order.
I'd go for multiple images set in background-image css property.
CSS:
#container {
background-image: url('image1'), url('image2'), url('image3');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
/*background-size: cover; - alternatively, see the explanation below */
}
HTML:
<body>
<div id="container"></div>
</body>
Using background-size: cover|contain; ensures that the images will be properly scaled by the browser to always fit the actual dimensions of the #container.
How does background-size: cover; behave?
Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area
How does background-size: contain; behave?
Scale the image to the largest size such that both its width and its height can fit inside the content area
References/further reading:
Multiple Backgrounds with CSS3
background-size property
I use such css for setting responsive background. When I see it on mobile, the background is zoomed in more and more if there is a lot of content appears on page. What is the proper way to avoid zooming of background? thanx
body {
background: url('someimage.jpg') no-repeat center center fixed;
background-size: cover;
}
A viewport meta tag like this might help (at the top of your html):
<meta name="viewport" content="width=device-width, initial-scale=1">
This will ensure that on a mobile screen, the content will not be displayed as on a large screen, and the width of the body element will only be as wide as the screen.
Its due to cover, cover will make sure the whole container gets covered with the image. You could try to use contain
You can try to define the body height as 100%, this should avoid vertical stretching of the background image:
body {
height: 100%;
background: url('someimage.jpg') no-repeat center center fixed;
background-size: cover;
}
And for that body height to work , you should also add this to your CSS:
html {
height: 100%;
}
With these setting, the bodys overflow is the default auto, which will cause a scroll bar to appear as soon as the contents exceed the 100% height.
Im trying to design a home page for my website where im using a div to show an illustration.
i want to use an image with the div that covers the entire size of the div.
the image dimensions are 1920x850.
this is the code for the div
<div class="custom-col col-md-12 col-sm-12" id="widget-static-block-1"></div>
the css:
#widget-static-block-1 {
background: url({{ d_banner1.jpg' | asset_url }});
width:100%; }
i want to be able to view the image on different screen sizes , but the it always gets cut off (either height or width)
ive tried playing around with height and width attributes to no luck.
If i set height:850px; then obviously it shows perfectly on a 1080p sceen but gets cut off on a smaller screen.
One thing i want to be clear about is that i want the entire image to show at all times at all browser sizes, i dont want it to be cut off via height or width.
Try background-size: 100% 100% or background-size: 100vw 100vh. If you want to be certain your div suits every media you can use vw and vh units.
It seems like you're asking for the div to fill the parent (height or width). And if you don't want the background image to appear cropped, you need to maintain the aspect ratio.
This looks what you need: Maintain aspect ratio of div but fill screen width and height in CSS?
Working example
Add styles to div with background:
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
You can resize window to see result.
html, body {
position: relative;
height: 100%;
margin: 0;
}
div {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: url('http://ghk.h-cdn.co/assets/16/09/980x490/landscape-1457107485-gettyimages-512366437.jpg');
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
<div>
</div>