I'm trying to make my site responsive and I cannot get my pages background image that covers 85% of the screen to display the entire image. It just shows a very small portion of it. What am I doing wrong? If it helps, my site is sundayfundayleague.com .
I'm attempting to do this..
.indexgraypage {
width: 100%;
left: 0;
right: 0;
min-height: 100%;
}
.homeimg {
background-image: url("/images/bright_lights_smallest.jpg");
width: 80%;
background-size: cover;
background-position: center;
height: 100%;
margin: auto;
position: absolute;
margin-right: 10%;
margin-left: 10%;
}
Related
My website is https://www.pisqueya.com
I have a big background image full width always visible at the bottom of all pages, it's working fine on desktop but not on mobile device.
Anyone know what I'm missing with my code below to fix that please?
body {
font-family: portuguesa;
background: url(https://www.pisqueya.com/wp-content/uploads/2019/07/footer-pisqueya.png) no-repeat center bottom fixed;
background-size: contain;
height: 100%;
overflow: hidden;
background-color: #fdeae1;
}
#wrapper,
#main {
background-color: initial!Important;
}
It looks fine for me.
The thing is when you are in a smaller screen the picture is getting small too.
If you want to use the same picture you should change the value of background-size for mobile devices or use a different picture for them.
Hope it can be usefull too.
https://www.w3schools.com/cssref/css3_pr_background-size.asp
Best regards.
You can use CSS media queries for mobile device. Add media query CSS for mobile device size and put your CSS Code in it. Following code will help you.
<style>
#media only screen and (max-width:768px) and (min-width:200px)
{
body {
font-family: portuguesa;
height: 100%;
overflow: hidden;
position: relative;
}
body::after {
background: url(https://www.pisqueya.com/wp-content/uploads/2019/07/footer-pisqueya.png) no-repeat center bottom fixed #fdeae1;
content: "";
height: 100%;
width: 100%;
position: absolute;
left: 0;
bottom: 0;
background-size: contain;
z-index: -1;
}
}
Change Your CSS
body {
font-family: portuguesa;
height: 100%;
overflow: hidden;
position: relative;
}
/*Add This CSS*/
body::after {
background: url(https://www.pisqueya.com/wp-content/uploads/2019/07/footer-pisqueya.png) no-repeat center bottom fixed #fdeae1;
content: "";
height: 100%;
width: 100%;
position: absolute;
left: 0;
bottom: 0;
background-size: contain;
z-index: -1;
}
I facing some issues for the table alignment over an image which I can't figure out which part is no correct. My table alignment is totally out of expectation when view by using different resolution device(laptop,TV) below is my code.
#image_overlay_panel {
width:100% !important;
float: left;
}
#image_overlay_panel .image{
background: transparent 50% 50% no-repeat url('/iameg/Acer_schematics.png');
position: relative;
top: 0px;
left: 0px;
width: 100%;
height: 808px;
background-size: 100%;
}
#effTablehtml{
position:absolute;
top: 28%;
left: 80%;
color: black;
}
I had try to removed height: 808px; and my whole image become very small as attachment below. Mind to share what mistake did I make. Thank you very much.
If you want your image to responsive to all screen, try to fix this rules in your code
#image_overlay_panel .image{
background: transparent 50% 50% no-repeat url('/iameg/Acer_schematics.png');
position: relative;
top: 0px;
left: 0px;
//width: 100%; <-- comment this line
//height: 808px; <-- comment this line
display: block;
max-width: 100%;
height: auto;
background-size: 100%;
}
you can use media screen css , as per your requirement
#media screen and (min-width: 480px) {
body {
}
}
I want a particular picture to cover the entire background of my site and when the window is resized, I want the picture to be scaled accordingly. What I'm looking for is something like https://www.tumblr.com. Notice the picture in the background scales accordingly to the window size.
Here is my css:
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
#backdrop {
z-index: -999;
min-height: 100%;
min-width: 100%;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
}
Where #backdrop is the id for the image I'm using.
I've tried numerous things but nothing seems to change the way my image is displayed.
Use object-fit to let an img behave like a background-image. See this working example:
html, body {
height:100%;
margin:0;
padding:0;
}
img {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
<img src="http://lorempixel.com/g/1100/300">
Two things:
Change the height: auto; to height: 100%, and add background styles.
#backdrop {
z-index: -999;
min-height: 100%;
min-width: 100%;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: url("image.jpg") center center no-repeat;
background-size: cover;
}
Also, use a HTML 5 Doctype:
<!DOCTYPE html>
I have a single div that's 100% of the width and height of the page.
I've set the background of the div to an animated gif and made the height of the background change with the div's height (which is 100% the height of the page). The background image repeats horizontally and is positioned at the bottom of the page.
HTML / CSS
Run this snippet in Chrome, make it full-screen and then resize the window until the line appears.
html {
height: 100%;
}
body {
min-height: 100%;
margin: 0;
padding: 0;
}
.bottomAnim {
border: none;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: #2851A6 url("http://i.stack.imgur.com/spmUM.gif") left repeat-x;
background-size: auto 65%;
background-position: bottom;
z-index: 1000;
}
<div class="bottomAnim"></div>
The problem is that a gray, horizontal thin line appears on top of the background image. The background of the page is the same color as the top of the image, so I don't know where the line is coming from. When I make the browser's (Google Chrome) height very short, the line disappears. This problem doesn't occur on Safari.
As can be seen in the screenshot above, the repeating background image is positioned at the bottom. There is are no vertical liens between every repeated image but there is one horizontal line that goes across all of them. I've checked the image and the line is not there, it is produced by the browser. How do I get rid of this line? I've looked at other posts on this but none of the fixes work.
Here's the background image:
html {
height: 100%;
}
body {
min-height: 100%;
margin: 0;
padding: 0;
}
.bottomAnim {
border: none;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: #2851A6 url("http://i.stack.imgur.com/spmUM.gif") left repeat-x;
background-size: auto;
background-position: bottom;
z-index: 1000;
}
<div class="bottomAnim"></div>
Use this
background-size: auto;
instead of
background-size: auto 65%;
#media workaround
This bug only appears to occur with larger viewport heights. Luckily it is not as critical to scale the image down after a certain height. With that in mind we can use #media queries to apply the background-size scaling only when the viewports height is under a certain size:
#media (max-height: 700px) {
.bottomAnim {
background-size: auto 65%;
}
}
Working Example
As a jsBin as well
html {
height: 100%;
}
body {
min-height: 100%;
margin: 0;
padding: 0;
}
.bottomAnim {
border: none;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: #2851A6 url("http://i.stack.imgur.com/spmUM.gif") left repeat-x;
background-position: bottom;
z-index: 1000;
}
#media (max-height: 700px) {
.bottomAnim {
background-size: auto 65%;
}
}
<div class="bottomAnim"></div>
I have created a div with a class called "responsive_image" and inside that div i have a img tag. The code is,
<div class="responsive_image">
<img src="img1.png"/>
</div>
The css code is,
.responsive_image {
position: relative;
background: url(images/laptop.png) no-repeat center #f0f0f0;
width: 100%;
height: 190px;
text-align: center;
background-size: contain;
background-position: center;
}
.responsive_image img {
width: 240px;
height: 160px;
position: absolute;
top: 6%;
left: 16%;
max-width: 100%;
height: auto;
display: block;
}
Actually, the laptop.png image is the original laptop image with size of 310x186 and inside that, a image with the size of 240x160 and that should correctly fixed inside the laptop image.
From the above code, everything seems to be work perfectly but while going for responsive, each and every time i need to adjust the top and left section in the .responsive_image img. Is there any solution so that i no need to alter top and left?
You have to remove width:100% from the .responsive_image class. And give width:310px as per your laptop image size
Also you have used percentage with top and left position. Change it with pixel. As percentage have always dynamic behavior as per the screen size. USE percentage only when you built a main structure of the html.
.responsive_image {
position: relative;
background: url(images/laptop.png) no-repeat center #f0f0f0;
width: 310px;
height: 190px;
text-align: center;
background-size: contain;
background-position: center;
}
.responsive_image img {
width: 240px;
height: 160px;
position: absolute;
top: 20px;
left: 20px;
max-width: 100%;
height: auto;
display: block;
}