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.
Related
I think I have an impossible task but before giving up on this I want to be sure that it's really not possible. Maybe it's possible with millions of media queries, but that isn't worth the struggle.
However, I have a backgroundimage with a height of 100vh, meaning it's always 100% height of the users window, and a width of 100%. These two things might make my task impossible.
Within the background image I have another image which should always be on that position, no matter what.
I came up with an example. I want the rocket always stay on that rectangle on the planet. I made this possible on my screen, but it could slip on your screen due different screen sizes.
(stackoverflow doesn't allow images with http, so please change the image src to http or take a look at my codepen: https://codepen.io/anon/pen/yjXbPL)
.background {
background-repeat: no-repeat;
background-image: url("https://wallpaper-house.com/data/out/7/wallpaper2you_191762.jpg");
background-size: cover;
background-position: center center;
height: 100vh;
width: 100%;
}
img {
width: 150px;
position: fixed;
top: 240px;
right: 780px;
transform: rotate(-20deg)
}
<div class="background">
<img src="https://www.myiconfinder.com/uploads/iconsets/256-256-7647188dd0df401f7ec5c5358a0af9a1-rocket.png">
</div>
Is this possible?
Use Position fixed as u do.
Use Left and top, not right.
Put the image beside the background div not in it.
Attached codesnippet shows you a solution. It is based on that you put your rocket and background in 2 different divs and stack them by using CSS-index.
Further on, the rocket is positioned fixed and I added a height of the background that makes it a bit scrollable.
Now, to solve the graphical split of the rocket and the background image you would have to create them as 2 different images and place them into each respective div in the HTML (see codesnippet).
In terms of using different devices you would have to test how the rocket might change position and solve that through a combination of media queries, and potentially use % position instead of px (to position the rocket correct):
.background-pic {
position: absolute;
z-index: 1;
width: 200px;
height: 1000px;
background-color: darkblue;
}
.rocket {
position: fixed;
z-index: 2;
width: 50px;
height: 50px;
background-color: orange;
margin: 100px 0px 0px 100px;
}
<div class="background-pic"></div>
<div class="rocket"></div>
The reason why this can be really hard to achieve is because you're using background-size: cover; which means stretch the image while keeping its aspect ratio and crop the image in order to fit its container's height and width. When you combine this with background-position: center center; it will crop on the edges equally. Then finally you're using two different kinds of measurement units: height: 100vh; width: 100%;
The question then becomes, before the image is cropped, what's the new width and height for the image that "cover" is applying?
This is something very difficult for CSS to determine because it requires things like knowing the ratio of your image (2560x1600 has a ratio of 1.6:1), then trying to fit it inside a container of variable width and height such that it is just small enough to fill it, while cropping out anything left out, before it is cropped, what is the actual size of the image?
Both height: 100vh; and width: 100%; will affect its size, in the manner explained above. As this requires comparing the image's original height and width, with the container's width and height to determine how to stretch the image, trying to figure this sort of math out with pure CSS isn't an easy feat for CSS to achieve without some assistance from JavaScript.
A decent solution is to add a bunch of transparency to the rocket image so it has the same size as the background so it can also go through the same "cover" stretching and cropping logic.
Give this a shot:
https://codepen.io/anon/pen/xjrPvM
HTML:
<div class="background" data-comment="2560x1600 has an aspect ratio of 1.6:1">
<div class="rocket">
</div>
</div>
CSS:
.background {
background-repeat: no-repeat;
background-image: url("https://wallpaper-house.com/data/out/7/wallpaper2you_191762.jpg");
background-size: cover;
background-position: center center;
height: 100vh;
width: 100%;
}
.rocket {
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
height: 100vh;
width: 100%;
background-image:
url('your-rocket-on-a-2560x1600-canvas-with-lots-of-transparency.png');
}
Within the codepen I used a base64 encoded version of "your-rocket-on-a-2560x1600-canvas-with-lots-of-transparency.png"
which is just the rocket placed on a 2560x1600 canvas I did in GIMP, transformed it -20.0 degrees moved it around so it's placed where you want it then exported it as a PNG.
Instead of using the image as background, I've used an inline image with the rocket placed on top. Then the rocket and background are made responsive relative to each other.
.background {
position: relative;
}
.background img {
max-width: 100%;
display: block;
}
#rocket {
top: 49%;
left: 47%;
width: 15%;
height: 15%;
background-image: url(http://www.myiconfinder.com/uploads/iconsets/256-256-7647188dd0df401f7ec5c5358a0af9a1-rocket.png);
background-position: top center;
background-repeat: no-repeat;
background-size: contain;
position: absolute;
transform: rotate(-20deg)
}
<div class="background">
<img src="https://wallpaper-house.com/data/out/7/wallpaper2you_191762.jpg">
<div id="rocket"></div>
</div>
Up to some point, it's possible. Here is my solution for that, I have tried and tested your code. These are the changes to fix your code:
Set the position of the image to fixed:
img
{
width: 150px;
position: fixed;
top: 50%;
margin-top: 20px; (adjust some pixels as per your need)
right: 50%;
margin-right: -90px;(adjust some pixel as per your need)
transform: rotate(-20deg)
}
Here is the complete working example:
https://codepen.io/atulraj89/pen/MGooLr
I seem to be having some issues with an image. It's not sticking to the same width when I modify the max height, like below.
.lead-pic img {
background-size: cover;
margin-left: -150px;
max-height: 1000px;
What I'm trying to achieve is an image that covers both sides of the page and also reduce the height of the image at the same time. I'm not sure if there is some code that locks the width in place when you change the height pixels.
Here is a screenshot of what I mean when I change the height:
This is on wordpress within a staging environment so I can't provide a URL to the website. Any ideas?
you can set only one property to image either height or width. If you set both the image will blur, aspect ratio is not same as original image. Try to wrap image in one element set property to that wraping element and assign max-width: 100%; to image tag.
If I am not wrong on this one, if you use the background-size property it will not be aplied to your image which is coded in your HTML file. For this you need to ad a background: url(link/to/image.png)
.lead-pic {
background: url(link/to/image.png);
background-position: top;
background-size: cover;
margin-left: -150px;
max-height: 1000px;
Example:
.lead-pic {
background: url(http://lorempixel.com/400/200);
background-position: top;
background-size: cover;
height: 300px;
width: 450px;
}
<div class=lead-pic></div>
Hope this helps. And, correct me if I'm wrong :).
If you want it as a background and to automatically adjust size, try making the image position fixed and putting your content in div with position:absolute. Use vh and vw to set the size. vh and vw are percentages of the current viewport height (vh) or width (vw).
i.e.: height:100vh = 100% of the current viewport height.
.lead-pic {
position: fixed;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
}
.content-example {
position: absolute;
top: 0;
left: 0;
width: 100vh;
height: 100vh;
}
<img class="lead-pic" src="https://s-media-cache-ak0.pinimg.com/736x/7f/d7/ab/7fd7ab72321777f4413ae3485622896c.jpg" />
<div class="content-example">
All of your content can go here.
</div>
Keep in mind that this will stretch the image disregarding the aspect ratio and will degrade the quality. If you want to keep the quality of the image, set it to 100vh/vw in the direction of the shortest dimension (in this case, width:100vw). The following snippet expands the image width, only:
ADDED AFTER CORRESPONDENCE, BELOW
This will get you the div like I understand you want it. If you want to add parallax functionality, I'd suggest searching for "Pure CSS parallax"
.lead-pic-container
{
max-height:200px;
height:200px;
width:100vw;
overflow:none;
background-size:cover;
background-image: url('https://s-media-cache-ak0.pinimg.com/736x/7f/d7/ab/7fd7ab72321777f4413ae3485622896c.jpg');
background-position: 50% -325.828px;
}
<br><br><br>
<div class="lead-pic-container"></div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
Solved.
With combined information from stack overflow users, here is the answer:
.lead-pic {
background-image: url(http://www.cutepinkboutique.com/staging/wp-content/uploads/2017/06/pexels-photo-220436-1.jpeg);
background-size: cover;
height: 900px;
width: 2000px;
margin-left: -220px;
background-position: 50% center;
}
.move-pic {
padding: 120px;
height: 1000px;
width: 100%;
}
My college asked me to code a site for a project but make it responsive. The image i'm using for the header background is not resizing.
This is the code for the HTML
<div id="headerbackground"></div>
And for the style i've put
#headerbackground {
background-image: url('../images/header.png');
background-size: contain;
max-width:100%;
max-height: 100%;
}
I've followed a few tutorials but no luck
You can't set an empty div background until you set a height on that. Or you have some content inside that div. So all you need to set the height of the div.
So here is your responsive background image. You can check responsiveness resizing the window.
body {
margin: 0;
}
#headerbackground {
background: url('http://farm3.static.flickr.com/2098/2260149771_00cb406fd6_o.jpg');
background-size:100% 100%;
background-repeat: no-repeat;
height: 100vh;
}
<div id="headerbackground"></div>
First, you haven't specified a minimum height, only a maximum, so it's collapsing to 0.
Second, you probably want to use background-size:cover; - that resizes the image to cover the whole element. Contain resizes the image so that the whole thing only fits within the element.
html,
body {
height: 100%;
}
#headerbackground {
background-image: url('https://placekitten.com/g/800/600');
background-size: cover;
background-repeat: no-repeat;
max-width: 100%;
min-height: 100%;
}
<div id="headerbackground"></div>
When using a background image on a Div I am not able to display the full height of the image, neither using height:auto; or height: 100%. Why so?
How can I solve the problem?
I have created a JS Fiddle here: https://jsfiddle.net/2d0npz2v/5/
body, html {
height: 100%;
margin: 0px;
}
.imageContainer2 {
background-image: url("http://i.imgur.com/AWi7r5m.jpg");
background-position: center top;
background-size: 100% auto;
height: 100%;
}
<div class="imageContainer2"></div>
UPDATE
Just for clarity, the image needs to be 100% width, and auto height (not cut at the bottom).
This example works but it's using the "content" property instead of the "background-image": https://jsfiddle.net/j47a6x7s/. I am looking for the same behaviour but without using content.
Well, the reason why this is?
In your working example you use content. A content has it's own height and uses up space, which the other elements on the page have to respect.
With the background-image solution, you use a background, which does not use space. The .imageContainer2 element can not know about the height of the background-image AND adapt itself to it.
This very problem was addressed here: How to get div height to auto-adjust to background size?
Just check, if the workaround is suitable for you
If the image(s) you want to display in the background property always has the same aspect ratio, you can use one of the techniques explained here to make the div keep the same aspect ratio as the image according to the width.
With your example it would look like this :
body, html {
height: 100%;
margin: 0px;
}
.imageContainer2 {
background-image: url("http://i.imgur.com/AWi7r5m.jpg");
background-position: center top;
background-size: auto 100%;
padding-bottom:178%;
background-repeat:no-repeat;
}
<div class="imageContainer2"></div>
Note that I don't know what you are trying to achieve exaclty. Using this method to display an image probably isn't semanticaly correct depending on the context.
var bgImg = new Image();
bgImg.src = $('.test').css('background-image').replace(/"/g,"").replace(/url\(|\)$/ig, "");
bgImg.onload = function() {
$('.test').css({'height':this.height,'width':this.width});
}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<div class="test" style="background-image: url('https://images.pexels.com/photos/36487/above-adventure-aerial-air.jpg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');">
</div>
Hope this exactly solves your issue.
Try giving these three to your .imageContainer2:
.imageContainer2 {
position: fixed;
width: 100%;
height: 100%;
}
Fiddle: https://jsfiddle.net/jsse9yL3/
You have to use an IMG for do that. Why you are insisting using CSS?
Example:
.container img
{
width: 100%;
height: auto;
}
<div class="container">
<img src="http://www.wallpaperawesome.com/wallpapers-awesome/wallpapers-full-hd-1080-x-1920-smatphone-htc-one-lumia-1520-lg-g2-galaxy-s4-s5-awesome/wallpaper-full-hd-1080-x-1920-smartphone-vertical-stiped-nebula.jpg"/>
</div>
You can't calculate the background-image height with a CSS rule and then make the DIV height's equal.
The closest solution for your problem is using a background-cover with all the related "issues".
UPDATE
Another CSS solution could be the padding-trick way, as follows:
.container
{
background-image: url('http://www.wallpaperawesome.com/wallpapers-awesome/wallpapers-full-hd-1080-x-1920-smatphone-htc-one-lumia-1520-lg-g2-galaxy-s4-s5-awesome/wallpaper-full-hd-1080-x-1920-smartphone-vertical-stiped-nebula.jpg');
background-size: contain;
background-repeat: no-repeat;
width: 100%;
height: 0;
padding-top: 177.77%; /* img-height / img-width * container-width (1920 / 1080 * 100) */
}
<div class="container">
</div>
I suggest anyway to use the first solution.
You can use:
.imageContainer2 {
overflow: hidden;
position: relative;
background-repeat: no-repeat;
background-position: 50%;
margin: auto;
min-height: 100vh;
background-size: cover;
}
Try to:
body {
padding: 0px;
}
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