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>
Related
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 am trying to put an image in my header and it must auto position it self when the window is resized and the header image must support different screen resolutions.
This is what I have so far:
HTML
<header>
<img class="thumbnail2" src="MyImage.jpg" alt="thumbnail2" />
</header>
CSS
.thumbnail2 {
display: block;
max-width: 123%;
height: auto;
width: auto;
}
header {
padding: 0px 250px 0px;
margin: 0 auto;
}
The reason my max width is 123% is to fit the image when in full screen but as soon I resize the window it does not resize itself and the image becomes smaller in width.
Please assist.
I understand the thought process behind your current code however, you are approaching the issue all wrong. You should be using a css media query to adjust your your header if you are looking for granular control depending on screen size.
Since you only have one image and have not included the dimensions of the image or where it should appear in the header, i will assume you want it to be the entire width of the header.
Additionally max-width should never be over 100%. Here is how I would restructure your code:
Note: if this does not fix your issue, you need to resize your image to be larger. If your image is to small it will not fill up the entire screen.
Codepen link
html:
<header>
<img class="thumbnail2" src="MyImage.jpg" alt="thumbnail2" />
</header>
CSS:
.thumbnail {
display:block;
/* set width to 100% */
max-width: 100%;
height: auto;
width: auto;
}
header {
/* padding:0px 250px 0px; */
padding-bottom: 250px;
margin: 0;
/* set width of the header to 100% */
width: 100%
}
Try put the image inside the css (not an img tag)
.thumbnail{
background-image : url(MyImage.jpg);
background-repeat : no-repeat;
background-position : center;
background-size : cover;
}
then it would auto adjust to the container .thumbnail width...
You could use JavaScript to dynamically adjust the image size with
the window size:
Auto image resize based on browser window dimensions
You could use Media Queries and select multiple points at which your header adjusts it's size: Resizing images using media queries
You could instead create a "banner" class that utilizes the "backgrounds" family of CSS properties: http://www.w3schools.com/css/css_background.asp
Try changing your code to something like this:
<style>
.thumbnail2 {
position: relative;
background-position: 50% 0;
background-repeat: no-repeat;
background-size: cover;
background-image: url("./path/to/image");
min-height: 100%;
}
</style>
<div class="thumbnail2"></div>
You can edit the height of the image shown with min-height, and the width should be responsive.
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;
}
I've created a responsive site and the images are set to:
max-width: 100%;
height: auto;
This is great and resizes the images for different screen devices and scaling of the window. However my images are varies sizes abut 5-30px differences. Is there a way to have them all the same height and width but also to auto scale.
I've tried adding height="170" and width="190" but this doesnt seem to work.
How can i have them set to the same size without manually resizing all images.
Example is here;
http://www.cartoonquiz-answers.com/Solutions/Level8
As you can see above the image for answer "King Julien" is slightly larger, as a result makes the next row with one image, instead of filling each row with 4 images.
thanks
If you want to force all images to the same size, just set a general CSS rule:
img
{
width: 190px;
height: 170px;
}
If you want them to scale, use percentages instead:
img
{
width: 100%;
}
This will force all images to fill their containers (and will maintain their aspect ratios).
You could force an aspect ratio:
.reviewname:before {
display: block;
content: "";
padding-top: 80%; /* aspect ratio */
}
.reviewname {
position: relative;
}
.reviewname > img {
position: absolute;
top: 0px;
width: 100%;
height: 100%;
left: 0px;
}
I think you have two options:
Use CSS background images (see below) or...
Crop/Resize the images to all the same height and width.
Here's a handy way to use background images: (not supported in all browsers)
<img style="background-image: url('/path_to_your_images/yourimage.png');" class="bgimg">
.bgimg {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
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