I have a background image that scales during development (running localhost). In production though, the image doesn't scale (shrink) with the screen.
.content
overflow: hidden
max-width: 100%
max-height: auto
background-image: image-url("project.jpg")
background-attachment: fixed
background-size: cover
background-position: top center
I'm wondering if its a heroku issue, or my code is messed up.
Changes may be required as per you vie code according to class/id you are using with elements.
HTML
<div id="bg">
<img src="images/bg.jpg" alt="">
</div>
CSS
#bg {
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
#bg img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
}
If your problem still not rectified please see this SO answer
A shot in the dark: Why don't you try background-size: contain;?
Using background-size: contain; will show the whole image and it will resize it accordingly to fit the width and/or height of its parent container maintaining its aspect ratio as well.
Related
I am trying to fit a div inside a shape using mix-blend-mode:screen. Although on large screen it looks good when I use chrome reponsive tool on some screens are shown borders like this is there a way to remove these borders?
Here is my code
.banner-img {
width: 100%;
max-width: 1000px;
height: 100%;
background-size: 100% 100%;
margin-left: -75px;
display: flex;
align-items: center;
position: relative;
background-color: rgba(51,51,51,0.8);
background-blend-mode: overlay;
&::before{
content: "";
position: absolute;
height: 100%;
top: 0;
left: 0;
width: 100%;
background-image: url('../../../Assets/mask.jpg');
background-size: 100% 100%;
border: none;
mix-blend-mode: screen;
}
<div className={`banner-content ${props.styles}`}>
<div className="banner-img" style={{ backgroundImage: `url(${props.img})` }}>
<div className="content">{<props.content />}</div>
</div>
<div className="content">{props.children}</div>
</div>
https://jsfiddle.net/d5rw3zkg/8/
UPDATE: the original 'fix' in this answer hid the border but altered the shape. #Alfred found that changing the height to calc(100% + 1px) rather than 101% fixed the problem - both hiding the border and keeping the correct shape.
Here's the original answer and the surmise as to the reason:
This is not a full answer to the question as I cannot reproduce the problem on any of the devices I have. But I have seen similar problems before where somehow there isn't an exact overlap of two images. This is possibly because of the mismatch between CSS and actual device pixels (which can be several pixels to make up one CSS pixel) but this is just a surmise.
Could you try this experiment? On a device where you can see the problem, also run it with just one setting changed in the SCSS. This is to see whether we can get the mask to stretch just beyond the underlying image so there is no chance of a sliver being left behind.
&::before{
content: "";
position: absolute;
height: 100%;/**CHANGE TO 101% (original answer) now calc(100% + 1px) **/
top: 0;
left: 0;
width: 100%;
background-image: url('../../../Assets/mask.jpg');
background-size: 100% 100%;
border: none;
mix-blend-mode: screen;
}
This'll probably be one of the easier questions, but I just cannot seem to find the answer.
I've got the following setup:
.wrapper {
position: absolute;
top: 5%;
bottom: 5%;
left: 50%;
transform: translateX( -50%);
}
img.content {
height: 100%;
width: auto;
}
The image's width doesn't seem to change when shrinking the height of the window.
Here's a quick JSfiddle to demonstrate the issue. Adjusting the height of the window either skews or offsets the image, instead of adjusting the width accordingly.
https://jsfiddle.net/5p82ey8k/
Cheers
width + translate is maybe not the best way.
block and margin auto is less tricky:
.wrapper {
position: absolute;
top: 5%;
bottom: 5%;
left: 0;
right: 0;
}
.content {
height: 100%;
display: block;
margin: auto;
}
<div class="wrapper">
<img src="http://www.keenthemes.com/preview/conquer/assets/plugins/jcrop/demos/demo_files/image1.jpg" alt="" class="content">
</div>
https://jsfiddle.net/5p82ey8k/2/
If you want to keep the image a well <img/> you could try this style.
img {
display: block;
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}
This should preserve the ratio. However a better solution in my opinion is making the img a css background-image, and setting it's size to cover, like so:
.image {
width: 100%;
height: 100%;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
you could implement your picture as a background image instead of an img. and give the container this stylings.
background:url('imgurl') center center no-repeat;
background-size:cover;
this way you could set the background-size property which allows you to let the picture always covers the container or contains it
about background-size
see working fiddle.
I am looking to make my video background like this:
http://www.teektak.com/
The issue I'm having is that my video is responsive, but it is fixed to the left. I can't figure out for the life of me how to make it so that it centers horizontally to the window when adjusted.
Here is a link to the test site to see what I am talking about: https://robotplaytime.paperplane.io/
HTML
<body>
<video poster="images/robotPlaytimeVideo.png" id="bgvid" autoplay loop muted>
<source src="images/robotPlaytimeVideo.mp4" type="video/mp4">
</video>
</body>
CSS
html,
body {
height: 100%;
width: 100%;
overflow: hidden;
}
video {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
min-width: 100%;
min-height: 100%;
z-index: -100;
background: url(../images/robotPlaytimeVideo.png) no-repeat;
background-size: cover;
}
Add these CSS rules to your body (the video's parent container):
text-align: center; /* ensures the image is always in the h-middle */
overflow: hidden; /* hide the cropped portion */
Add these CSS rules to your video:
display: inline-block;
position: relative; /* allows repositioning */
left: 100%; /* move the whole width of the image to the right */
margin-left: -200%; /* magic! */
Most of this was pulled directly from Bryce Hanscomb's answer to another similar question: How to center crop an image (<img>) in fluid width container
Here's a jsfiddle just in case:
http://jsfiddle.net/pLj0gcpu/
(Note that the markup and styles in this fiddle were pulled from your given URL)
To get the video to take the full size of the screen:
video {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100%;
width: 100%;
}
If you wanna center something horizontally responsively, then do
left: 50%;
transform: translateX(-50%);
Note, you will need to set a "position" as well
I'm trying to stretch a background image to 100% width and height of the parent div. background-size is not supported in IE8 of-course. I tried the following code but it's not working.
.box:before {
background: url(images/body_background2.png) no-repeat;
display: block;
position: absolute;
z-index: -1;
height: 100%;
width: 100%;
content: '';
}
Use a <img> with position:fixed;top:0;left:0;width:100%;height:100%; and negative z-index. There's unfortunately no way to implement this behavior in IE 8 using only CSS.
See the following article for further information: How Do you Stretch a Background Image in a Web Page.
If you wish to use an image as a background for a given <div> try the following approach:
<div class="fullbackground">
<img class="fullbackground" src="yourImageSrc" />
</div>
.fullbackground{
position:relative;
}
img.fullbackground{
position:absolute;
z-index:-1;
top:0;
left:0;
width:100%; /* alternative: right:0; */
height:100%; /* alternative: bottom:0; */
}
I use this article often to do my full screen backgrounds :)
http://css-tricks.com/perfect-full-page-background-image/
Using the AlphaImageLoader filter and setting the sizingMethod to scale seems to do the trick according to Perfect Full Page Background Image.
HTML:
<img class="fullscreen" src="fullscreen.jpg" />
CSS:
img.fullscreen {
border: 0;
height: auto;
left: 0;
min-height: 100%;
min-width: 1024px;
padding: 0;
position: fixed;
top: 0;
width: 100%;
z-index: -1001;
}
Have a look at https://github.com/louisremi/background-size-polyfill. This is a nice plugin another member of my team came across for the same issue.
Once you have the script included into your solution, add the following line into the relevant CSS class along with any other sizing/positioning attributes you may wish to add.
-ms-behavior: url(/scripts/backgroundsize.min.htc);
We have this implemented for full width images and widget backgrounds and it works a treat.
This (demo) does the trick (digestable version of css-only technique #2 from http://css-tricks.com/perfect-full-page-background-image/):
<div class="background-size_cover">
<img src="images/body_background2.png">
</div>
and
.background-size_cover {
top: -50%;
left: -50%;
width: 200%;
height: 200%;
position: relative;
}
.background-size_cover img {
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
position: absolute;
}
You'll want to make sure that the parent div is overflow: hidden; besides having whatever dimensions you want the image to get stretched to fit in.
I combined AlfaImageLoader filter with css3 background-size and worked on all browsers. Here's what i did.
background : url('../images/background.jpg') no-repeat ;
background-size: 100%;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='images/background.jpg',sizingMethod='scale');
By the way, you need to put your background image to your wrapper div in this method.
I'd like to center an image in a page both vertically and horizontally even when the browser is resized.
Currently, I use this CSS:
.centeredImage {
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -150px;
}
And this HTML:
<img class="centeredImage" src="images/logo.png">
It centers in FF but not IE (image center is placed at upper left corner). Any ideas?
-Robot
I solved it this way:
img.class-name{
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
Try using this :
position: absolute
the universal KISS ("keep it simple and stupid") way:
<p style="text-align: center;"> <img src="myImage.png" /></p>
This is a tricky way, but it works:
CSS:
html, body, #wrapper {
height:100%;
width: 100%;
margin: 0;
padding: 0;
border: 0;
}
#wrapper td {
vertical-align: middle;
text-align: center;
}
HTML:
<html>
<body>
<table id="wrapper">
<tr>
<td><img src="my_cool_image.png" alt="hello world" /></td>
</tr>
</table>
</body>
</html>
text-align:center;
vertical-align:middle;
vertical-align
Should to the trick
If the supplied answers do not work and/or not consistent in each browser you may want to give this a shot:
http://andreaslagerkvist.com/jquery/center/
text-align:center;
Should get it, though.
clear: both;
margin: auto;
Solution:
.centeredImage {
position: absolute;
top: 50%;
left: 50%;
margin-top: image-height/2;
margin-left: image-width/2;
}
since you mentioned:
margin-top: -50px;
margin-left: -150px;
And if its aligning properly to the center then your image height would be 50x2=100px; & width 150x2=300px;
.image {
position: fixed;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
I did it! This method is rock solid and works on all major browsers.
style="position: fixed; margin: 0 50%; left: -850px; right: 0; top: 0; bottom: 0;"
I have simply used a left of half the width of the image and then shunted it across using margin. Works a treat :)
There is a very simple, cross browser, auto resize method. Taking an image with width of 200px. Take half the width then do the following:
#imgcent1 {
left: calc (100% - 100px / 2 );
/*rest of code*/
}
Make sure there is "white space" to avoid negative and positive numbers (best using this convention for all operands). It will auto resize. Just try it and hopefully, testing on other browsers will ensure that it becomes the standard as intended.
IE has issues with position: fixed (along with a million other things), so I would advise against that if compatibility is important.
Use position: absolute if the container doesn't have to scroll. Otherwise you'll need some js to adjust the top and left of your image as you do scroll.
text-align: center should work if applied to the image's container, but not to the image itself. But of course that only addresses the horizontal, not vertical. vertical-align: middle doesn't work for me, even with a large enough container.
Auto margins don't work in IE, at least when I test it.
A single image on the web & responsive
Background Image:
/image.png
CSS:
html, body { height: 100%; margin: 0px; }
.bg-image {
width: 100%;
height: 100%;
background-image: url(image.png);
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
text-indent: -9999px;
}
HTML:
<body>
<div class="bg-image">Some text not displayed</div>
</body>