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%;
}
Related
I want to create background-image full-screen in HTML, and CSS I have set all properties for background image.
This is my background-image on folder.[![enter image description here][1]][1]
I try to do this.
<style>
* {
margin: 0;
padding: 0;
}
.background-image {
background-image: url("https://via.placeholder.com/100.jpg");
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
height: 100vh;
width: 100%;
}
</style>
<body>
<div class="background-image"></div>
</body>
But I don't want the background-image on the top to hidden or cut, I want to display all background-image full-screen. As you can see, missing the text above. Any idea how to fix this?
You could use background-size: contain instead of cover. That way the image will expand to fill the avialable space but will not be cut. This will leave empty spaces around the image.
If you want to have the gradient background to fill the whole area (so you don't have empty spaces) you could use 2 backgrounds:
one with the gradient with background-size: cover
one where you cut out the subject of the picture (with Photoshop or a similar program) and with background-size: contain
Edit:
I made an example with a css gradient. The kitten should be the subject. I gave it at fixed height (400px) in stead of contain, but on smaller screens it will cut the kitty. If you don't want sliced kitten, you can change the 400px in the example below to contain.
#full-screen {
position:fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background:
center / 400px url(https://placekitten.com/400/400) no-repeat,
radial-gradient(#e66465, #9198e5);
}
<body>
<div id="full-screen">
</div>
</body>
For more technical details and options you can consult the documentation at developer.mozilla.org, that's a great resource:
https://developer.mozilla.org/en-US/docs/Web/CSS/background
https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/radial-gradient()
This is a very simple problem and so I must be doing something very silly: I cannot get a background image to be replicated properly inside a div.
I have reduced it the the following small example. I have a main div with a specific pixel size, and constrained to be a certain amount less than the current viewport. Within that, I have a second div that contains a fixed (non-scrolling) background image. I need to have the image in a separate div so that its opacity doesn't affect anything else.
This example tries to get a background image to be replicate 2x2 in the main div (i.e. width and height = 50%), but all the combinations that I try are basing this on the the viewport size and not the parent div size.
NB: you will need to run this example in full-screen mode to see what I mean. The main div is less that the viewport and I cannot get an integral 2x2 replication of the image.
<!DOCTYPE html>
<html>
<head>
<title>Test background</title>
<meta charset="utf-8"/>
<style>
div.tp-main {
background: #f0f0f0;
border-style: solid;
border-width: thin;
margin: 0px;
padding: 0px;
max-width: 99vw;
max-height: calc(52.294vw - 23px);
width: 1090.00px;
height: 570.00px;
}
div.tp-bg { /* Separate div to avoid opacity affecting other stuff */
width: 100%;
height: 100%;
background-image: url("https://clipartart.com/images/tree-branch-clipart-png-4.png");
background-size: 50.00% 50.00%;
background-repeat: repeat;
background-position: 0 0;
background-attachment: fixed;
opacity: 0.20;
}
</style>
</head>
<body>
<div class="tp-main">
<div class="tp-bg"></div>
</div>
</body>
</html>
I am trying to place an image in the centre of the screen (a cell phone) and I also have a large logo image that I want to be anchored to the bottom right of the page. I am very new to CSS and HTML. So far I have this:
<!DOCTYPE html>
<html>
<head>
<title>My Site</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div id="content">
<p class="centeredImage"><img src="image1.png"></p>
</div>
</body>
</html>
and this in the CSS:
#content {
width: 99%;
height:100%;
margin: auto;
background-color: white;
background-image: url('logo.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right;
}
.centeredImage
{
text-align:center;
display:block;
}
However I achieve this:
The phone is centred fine however if I resize the window the logo wont stick to the bottom right of the screen. I have played around with using a footer a little bit but when I do this the logo image is below the cell phone image. I just want it to be in the background bottom right no matter how big the window is with the cell phone image centred. Could someone give me some pointers on how to do this please? Thanks!
EDIT so I have wrapped the logo image in a separate div:
.logo {
position: fixed;
bottom: 0;
right: 0;
}
however this now overlaps the centered image slightly ie is not in the background
Why don't you add this in your CSS file and remove div from HTML.
body {
background-image: url('file_location.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
}
Example: FIDDLE
Background position can be anything like left bottom or right center.
Perhaps attempting to use the logo as a background image isn't the best approach. Why not stick the image in absolute positioned div at the bottom right?
this CSS gets my background to fill 100% of the screen height in iOS but there is a minor problem - when you scroll down there is initially white space, then when you release your finger and stop scrolling the background image "adjusts" and fills 100% of the screen height again. The problem does not re-occur on the same page if you continue to scroll, just the first time. Could someone please help? Thanks
#background {
background: url(../img/background.jpg) center repeat-x;
position: fixed;
background-size: auto 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1
}
This happens because your #background element is set to "follow" the height of the window:
#background {
...
position: fixed;
top: 0;
bottom: 0;
...
}
But, the window in Safari changes its size when you scroll down the content for the first time from 460px to 529px:
As you can see from these screenshots, when the web page is loaded the window.innerHeight is equal to 460px (on iPhone5). Then, when you begin scrolling the page down while your finger touches the screen the window.innerHeight is increased to 529px but the content is not yet updated. Only when the finger is released from the screen the #background element is updated with the new window height which equals to 529px.
To fix this issue you should make sure that the #background element is higher than the initial window height by 529-460 = 69px. Or the #background element has constant height of 529px (or higher):
#background {
...
position: fixed;
top: 0;
bottom: -69px;
...
}
OR
#background {
...
position: fixed;
top: 0;
/* use height instead of bottom */
height: 529px;
...
}
Here is a final code that fixes this issue:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Fixed background</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/styles.css?v=1.0">
<style>
#background {
background: url(bkgd.png) repeat;
position: fixed;
background-size: 100% auto;
top: 0;
left: 0;
right: 0;
bottom: -69px;
z-index: -1;
}
</style>
</head>
<body>
<div id="background"></div>
<div style="height: 5000px;"></div>
</body>
</html>
I have just solved this issue. The problem for me was that the whitespace was showing when I had my body tag with a background-image, with the background-size set to cover. To fix this issue I set:
background-size: 100vw 100vh;
Then set the media query I was having the problem with to
{background-size: cover;}
Why not use background-size: cover. That way the background image will always fill its attached div or body tag
<name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0," />
body{
background-size: cover;
}
Try using viewport units on the background
background-size: 100vw 100vh;
But first add viewport meta tag to your page:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
NOTE:
The vw and vh units are not fully supported, check out the supported browsers here.
You can fix this by using long transition delays to prevent the element resizing.
eg:
transition: height 250ms 600s; /*10min delay*/
The tradeoff with this is it prevents resizing of the element including on device rotating, however you could use some JS to detect orientationchange and reset the height if this was an issue.
html, body {
display: block;
height: 100%;
width: 100%;
}
body {
background-image: url('some/image.jpg');
background-repeat: repeat-x;
background-attachment: fixed;
background-position: center center;
background-size: contain;
}
jsfiddle
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.