my problem is specific to the background image. I have applied a background image to the body and centred it horizontally. For each page I will add a paragraph below the header and each one will be a different size causing scroll. The background image must flow behind the paragraph but I can't make the body tag to expand to include the paragraph, meaning the background image cuts off when you scroll down. I don't want to set a specific height because that will make the page scroll beyond the paragraph. I've tried just about every combination of position relative/absolute and height/min-height I can think of.
<html>
<body>
<div class="paragraph">
<p>text!</p>
</div
</html>
CSS
html {
background: url('/images/bg.png');
margin: 0;
padding: 0;
height: 100%;
min-height: 100%;
}
body {
margin: 0;
padding: 0 0 50px 0;
background-image: url('../images/fullheader.gif');
background-position: center 20px;
background-repeat: no-repeat;
position: absolute;
top: 0px;
bottom: 0px;
right: 0px;
left: 0px;
min-height: 100%;
}
.paragraph {
width: 640px;
padding: 10px 20px;
margin: 400px auto 0 auto;
min-height: 100%;
}
I can post a screen shot if that helps.
add css to body like this
body {
background:#fff url(background.jpg) repeat-y top center;
margin:0px;
padding:0px;
}
If vertical repeat is not an option and your bg image of course cannot be endless, I think the only way to not cut off the image after some scrolling is fixing it's position:
body {
background-attachment: fixed;
}
No, there might be another solution, but in most cases this won't look very well: Set the background-size, e.g.:
body {
background-size: contain;
}
If your target is keeping the background with height enough to cover the size of your paragraphs and with the restriction of not repeat and not distort the aspect radio there is a simple and clean solution
Locate the background in the body tag .
Set its size to auto for horizontal size and 100% for the height
The paragraph, as being contained by the body will push the body height and this will push your background height without distortion of the aspect ratio
body {
width:100%; <!-- or what ever.....-->
background:url("whatever.jpg") no-repeat;
background-size:auto 100%;
}
Here is a fiddle for you. i used a wikipedia image. Play with it modifying the amount of paragraphs, etc... Hope it helps
Related
(Beginner question)
Hello, I'm trying to create a site that has one long image as a background that you can scroll. Nothing fancy, just one image of 1920x3740 of which you can only see a viewport-sized section of. I added an image to clarify what I mean.
I've tried using multiple divs under each other of 1920x1080, and chopped the image up to fit correctly, which kind of worked, but they wouldn't stay 16x9 so the edges of each image didn't match up. Now what i've got is one big image but I can't scroll it.
HTML:
<div class="bgImageFull"></div>
CSS:
.bgImageFull{
background-image: url(../images/LandingPage/NEW_TAHIN_IMAGE_FULL.jpg);
height: 100%;
width: 100%;
background-repeat: no-repeat;
background-size: cover;
}
This also goes before but I don't think it does anything for my issue:
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
html, body{
height: 100%;
font-family: 'functionPro';
}
.bgImageFull {
background-image: url(../images/LandingPage/NEW_TAHIN_IMAGE_FULL.jpg);
height: 3740px;
width: 100%;
background-repeat: no-repeat;
background-size: cover;
}
Height: 100%; Could be what's messing this up for you.
It might be better to specify the actual height of your image in the image's class. 100% is just going to cover the available height of the parent element.
I have a problem about background image positioning in HTML5. I wanted to position my picture in the center and it did not work. This is the code I used in external CSS file:
body {
background-image: url(logo.jpg);
background-repeat: no-repeat;
background-position: center center;
}
The same problem is with other two-word commands (example: "bottom left;"). Syntax is fine (checked multiple times) and still the same:
problem_image
I don't understand the problem, please help?!
Short answer: background-attachment: fixed
Details:
The background-attachment property in CSS specifies how to move the background relative to the viewport.
There are three values: scroll, fixed, and local. The best way to explain this is via demo (try scrolling the individual backgrounds):
#import "compass/css3";
h2 {
text-align: center;
margin-top: 48px;
}
div {
height: 200px;
width: 50%;
max-width: 600px;
margin: 32px auto;
overflow-x: hidden;
overflow-y: scroll;
}
.scroll {
background: url('http://lorempixel.com/600/200/animals');
background-attachment: scroll;
}
.fixed {
background: url('http://lorempixel.com/600/200/animals');
background-attachment: fixed;
}
.local {
background: url('http://lorempixel.com/600/200/animals');
background-attachment: local;
}
.expand {
height: 400px;
width: 100%;
}
.extra-space {
margin-bottom: 50px;
}
<h2><code>scroll (default)</code></h2>
<div class="scroll"><div class="expand"></div></div>
<h2><code>fixed</code></h2>
<div class="fixed"><div class="expand"></div></div>
<h2><code>local</code></h2>
<div class="local"><div class="expand"></div></div>
<br class="extra-space">
There are two different views to think about when talking about background-attachment: the main view (browser window), and the local view (you can see this in the demo above).
scroll is the default value. It scrolls with the main view, but stays fixed inside the local view.
fixed stays fixed no matter what. It's kind of like a physical window: moving around the window changes your perspective, but it doesn't change where things are outside of the window.
local was invented because the default scroll value acts like a fixed background. It scrolls both with the main view and the local view. There are some pretty cool things you can do with it.
SOURCE
if you add a height of 100vh to your body the background gets centered, check below snippet:
100vh - is the height of the viewport (the visible area of a web page)
body {
background-image: url(https://via.placeholder.com/150/0000FF/808080);
background-repeat: no-repeat;
background-position: center center;
height: 100vh;
margin: 0;
}
<html>
<body>
</body>
</html>
The html and body elements are block level elements just like a div. Without a height explicitly set they simply will assume the height of their content, or with no content their height will be 0.
So you need to set the height of the body element to the same size as your viewport height to achieve your goal. The best way to do this would be to use viewport relative units:
body {
height: 100vh;
background-image: url(logo.jpg) no-repeat center;
}
Alternate method:
Another way to do it would be to first set the html and body height to 100%
html,
body {
height: 100%;
}
body {
background-image: url(logo.jpg) no-repeat center;
}
You must set it on both as the body height is relative to the html height when using percentage units.
you can use transform property to set image in center.You just need to call your image class in css and write this code.
.imgclass{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
This will set your image in the center of body. and if you are using bootstrap then just write align-self-center in your HTML image class.
I have an SVG image and it just doesn't display the way I want.
This is the CSS code I'm using :
.container-background {
min-height: 25vh;
background-image: url("svg-image.svg");
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
border-bottom: 1px solid #e9e9e9;
I also tried object fit contain / cover / every other option. I just can't get it to display right. I need it to cover the whole container.
Any ideas how to achieve this ? I ran out of options.
Try setting background-size:contain, min-height:100vh and background-size:50% (you can remove background size if you like or adjust the percentage to get it covering just right for your design).
.container-background {
min-height: 100vh;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/0/09/America_Online_logo.svg");
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
background-size: 50%; // remove this or tweak to ajust the fill amount
border-bottom: 1px solid #e9e9e9;
}
jsfiddle: https://jsfiddle.net/so099hnt/1/
Your CSS is functioning correctly, cover takes up 100% of the space maintaining the aspect ratio of the image so any excess gets cut off.
Background contain
If you would like to display the whole image then you should be using contain.
Fiddle
https://jsfiddle.net/7uca5x64/1/
Stretched background using inline image
If you would like it to take up 100% of the width and height without keeping it's aspect ratio then add it in as an inline image, but this would require a format other than SVG. You could then use absolute or fixed positioning to make it look like a background image.
img {
height: 100%;
width: 150%;
position: absolute;
left: -20%;
z-index: -1;
}
Fiddle
https://jsfiddle.net/7uca5x64/5/
Stretched background using inline SVG
If you have to use SVG, you will have to inline it into the HTML and then you can control it via CSS. You will also have to add preserveAspectRatio="none" to the SVG.
svg {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: -1;
}
Fiddle
https://jsfiddle.net/7uca5x64/6/
I'd like to add a background-image to my website inside a div that should resizes perfectly on all devices. I tried the simplest way like "height: 100%" but that didn't work at all. I also tried media-queries which of course works but is rather complicated so I wanted to ask if there is an easier way to solve this.
Here's the HTML
<div class="bg"></div>
And that's the CSS
.bg {
background: url('bg.jpg') no-repeat center cover;
}
#Sqnkov has the right answer. An empty div will work with that set up.
Try running the code below and see. (Make it full page and resize the browser).
The center center makes in centered in the Y and X axis. background-size: cover; makes the image cover all available space. If you want to make sure the entire image is in view, use background-size: contain; instead.
body{
margin: 0; /* Stripping out margin and padding so .bg can be full width*/
padding: 0;
}
.bg {
box-sizing: border-box; /*Not necessary in this situation*/
display: block; /*Not necessary, but we do want it this way*/
width: 100vw; /*Not necessary, but we do want it this way*/
height: 100vh; /*Necessary. 100vh = 100% of the viewport height*/
padding: 0; /* No padding */
margin: 0; /* No margins */
background: url('https://images6.alphacoders.com/405/405948.jpg') no-repeat center center;
/* Shorthand: image, repeat, X align, Y align. */
background-size: cover; /* Cover all available space*/
}
<div class="bg"></div>
Alternatively, if you specify that the parent containers' (html, body) height and width as 100% you can use 100% height/width instead of 100vh/vw on the child .bg container as percentages are relative to the parent container.
See the example below:
html, body{
margin: 0; /* Stripping out margin and padding so .bg can be full width*/
padding: 0;
width: 100%; /*Setting parent width -- child width is relative*/
height: 100%; /*Setting parent height -- child height is relative*/
}
.bg {
box-sizing: border-box; /*Not necessary in this situation*/
display: block; /*Not necessary, but we do want it this way*/
width: 100%;
height: 100%; /* Now 100% height will work */
padding: 0; /* No padding */
margin: 0; /* No margins */
background: url('https://images6.alphacoders.com/405/405948.jpg') no-repeat center center;
/* Shorthand: image, repeat, X align, Y align. */
background-size: cover; /* Cover all available space*/
}
<div class="bg"></div>
I'm still learning myself, but have you tried "background-size: cover;" in your CSS?
See more info here: https://www.w3schools.com/cssref/css3_pr_background-size.asp.
Simply apply a size preference to your background property. Here is a shorthand usage:
This is a setting for a big background image that fills its parent to the borders.
background: url('images/image.jpg') no-repeat center center/cover;
Which is equal to:
background-image: url('images/image.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
I suggest giving this MDN thread a read.
I just found out that you can use "height" indeed and set it to 100, but not '%' but 'vh'.
height: 100vh;
When user's device width is more than 480px I'll show him original GIF as a background of my site.
My HTML:
<img class="background" src="assets/img/960XAUTO.gif" alt="Pink Smoke Background">
My CSS:
.background {
display: block;
height: 100%;
margin: 0 auto;
}
When user's device width is less than 480px I increased my GIF's width to 200%, because without increasing the smoke looks very commpessed and skinny:
So, I do this in my CSS:
#media screen and (max-width: $breakpoint) {
.background {
position: absolute;
left: -50%;
max-width: 200%;
}
}
And here is a problem. As my GIF is increased in 2 times, I get horizontal scrollbar. Just look:
I really need to increase GIF, so that the smoke looks more widely. How can I remove empty place on the right side, which was created by GIF? Or maybe there is some other way to increase GIF's width? I tried to use overflow in the different ways. Also I tried to set body width 100% of device screen.
Add this to your CSS, referring to the element you need (it should be the entire html or body like in this example, if this is your entire site background, btw):
html, body {
overflow-x: hidden;
}
Add background-attachment:fixed; in your style
code exact :
.background {
display: block;
background-attachment:fixed;
height: 100%;
margin: 0 auto;
}
You should try using background center with optional scaling percentages.
The full edit is here https://plnkr.co/edit/wZZqiC3awyEzHLPpxYBI
.bg{
width: 100%;
height: 100%;
background: no-repeat center/80% url("http://m.gdz4you.com/sandra/assets/img/960XAUTO.gif");
background-size: cover;
}
and ofcourse just drop a div
<div class="bg"></div>