I have read so many posts about responsive CSS Background-Image's but I can't make mine work.
My site is http://www.conn3cted.uk.tn/intManagement.html and I'm trying to use the image as a 'banner' so can't have the height too large.
I seem to be able to fix the issue either on Desktop or Mobile, but they don't want to work together. I've used the suggested solutions (below) but I don't get the whole picture to scale up/down and it only shows part of it or a lot of white space. What am I doing wrong!?
.whatWeDo {
padding-top: 100px;
background-image: url("/images/intManagement/homePage/whatwedo.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 120px;
}
Try this css and use media queries to change your margin-top for mobile device:
.whatWeDo {
background-image: url("/images/intManagement/homePage/whatwedo.jpg");
background-repeat: no-repeat;
background-size: 100% auto;
height: 100vh;
margin-top: 80px;
}
#media screen and (max-width: 878px) {
.whatWeDo {
margin-top: 170px;
}
}
Try this css with replace your css:
This can also responsive only set top as per you needed:
.whatWeDo {
background-image: url("/images/intManagement/homePage/whatwedo.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
float: left;
height: 100%;
padding-top: 100px;
position: relative;
top: 80px;
width: 100%;
}
Related
help, header banner is incomplete on phone screen
.imgbanner{
height: 200px;
max-width: 100%;
margin-top: -70px;
background-size: cover;
background-position: center;
background-image: url('https://i.imgur.com/fKnCN5Z.png');
}
<div class="imgbanner">
</div>
How can I make it display well horizontally?
Real image: https://i.imgur.com/fKnCN5Z.png 1024x312px
Try removing the width and margin. You also might not want to set a fixed height, because this will crop your image on smaller screens.
Like this, the text in the image might not be readable when viewed on smaller screens.
.imgbanner {
height: 200px;
/* max-width: 100%; */
/* margin-top: -70px; */
background-size: cover;
background-position: center;
background-image: url('https://i.imgur.com/fKnCN5Z.png');
}
<div class="imgbanner">
</div>
You should remove max-width and custom height property because this will crop your background image or try to add property background-repeat:no-repeat;
.imgbanner {
height: 200px;
background-size: cover;
background-position: center;
background-image: url('https://i.imgur.com/fKnCN5Z.png');
background-repeat: no-repeat;}
<div class="imgbanner"></div>
I'm working on a webpage main title. I want to set a 100% height background image and a big title on the front of it.
This is how I did:
In the CSS file:
body, html {
height: 100%;
}
.bg {
background-image: url("../img/image.JPG");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.bigtitle {
/** padding-left:15%;***/
padding-top: 20%;
color: white;
font-family: 'Trocchi', serif;
font-size: 1500%;
font-weight: normal;
margin: 0;
/*line-height: 1.0em;*/
}
In HTML file:
<div class="bg">
<center><h1 class="bigtitle">My title</h1></center>
</div>
I also tried to set the size of the title with em but it was the same problem.
This is good on the desktop but completely fail on mobile or small screen size. How can do to work on mobile and on desktop as well?
I would just leave this as a comment but I don’t have permissions yet:
You can manually adjust the size of the title to your liking for different screen sizes using media queries in your css. Although they probably aren’t the most efficient way to add responsiveness, they have worked wonders for me.
try using this, I have no problem with it, you can set your desired height, should work on both mobile and desktop.
.bg {
background-image: url("../img/image.JPG");
height: calc(100vh);
width: auto;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
Take off the height, then your image will equal the background-size: cover;
.bg {
background-image: url("https://www.w3schools.com/w3css/img_lights.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
https://jsfiddle.net/bw7xmytp/
i am trying to create a page that has a background image in between a header and footer will work on any screen size.
I have managed to create the page and it works fine on desktop screen. The problem i have is when I resize to mobile size screen then the background is repeated.
Here is my code:
div {
width: 100%;
height: 5886px;
background-image: url('services-yellow.jpg');
background-size: 100% auto;
background-repeat: none;
border: none;
}
Has the height attribute set at a specific height, but i am not sure how i can change this so that it works on all screen sizes.
The site can be viewed at: http://s116169771.websitehome.co.uk/testsite/
If somebody could please advise on how i could fix this, would really appreciate it.
Thanks in advance.
none is not a valid value for background-repeat, use no-repeat instead.
background-repeat property (MDN) (W3Schools)
Here is a list of possible values for background-repeat, you need:
background-repeat: no-repeat;
None doesn't exist for this property.
Use background-repeat:no-repeat
div {
width: 100%;
height: 5886px;
background-image: url('services-yellow.jpg');
background-size: 100% auto;
background-repeat: no-repeat;
border: none;
}
or simply short the code
div {
width: 100%;
height: 5886px;
background: url('services-yellow.jpg') no-repeat 100%;
border: none;
}
Change background-repeat: none; to background-repeat: no-repeat; none is not a valid value for background-repeat property.
Your code should be:
div {
width: 100%;
height: 5886px;
background-image: url('services-yellow.jpg');
background-size: 100% auto;
background-repeat: no-repeat;
border: none;
}
You can also use short hand css background property as follows:
div {
width: 100%;
height: 5886px;
background: url('services-yellow.jpg') no-repeat 100% auto;
border: none;
}
More Details
Newbie here hacking away at this little project:
http://development.puretapecult.divshot.io/
And my question is, how do I automatically resize the .pngs in the center of the screen when the browser size collapses, or when it is viewed on a mobile browser?
Do I have to use #media queries for mutliple viewing sizes, and create multiple classes for each png?
Any help appreciated.
CSS classes that modify the images:
.spinner-outer {
display: block;
width: 327px;
height: 327px;
position: absolute;
left: 50%;
margin-left: -163px;
border-radius: 50%;
background: url(spinner-outer.png) center center no-repeat #32302e;
}
.spinner-center {
height: 200px;
width: 200px;
position: absolute;
background: url(spinner-center.png) center center no-repeat;
border-radius: 50%;
left: 50%;
top: 50%;
margin: -99px;
pointer-events: none;
}
.play-sprite {
position: absolute;
top: 50%;
left: 50%;
margin: -35px 0 0 -35px;
background: url(play-sprite.png) 0px 0px no-repeat;
height: 70px;
width: 70px;
}
I would use media queries to change the height and width of the divs. Note that you do not need to create multiple classes for different sizes. Just use multiple media queries like this:
#media (max-width: 768px) {
.spinner-outer {
width: 200px;
height: 200px;
}
}
You'll also need to specify that you want your background image to fit the size of the div or it won't change sizes when the div does. Use the CSS3 property background-size as long as you're comfortable not supporting old browsers.
.spinner-outer {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
More info on background-size and some alternative techniques if you want to support older browsers: https://css-tricks.com/perfect-full-page-background-image/.
Try somthing like this.
HTML:
<div class="image-wrapper">// Div will always re-size with page.
<img src="[src]" />
</div>
CSS:
.image-wrapper{
max-width:90%;
height:auto !important;
position: relative;
display:block;
margin:0 auto;
}
.image-wrapper img{
max-width:100% !important;
height:auto !important;
display:block;
}
Or you can use bootstrap and add a class to image like so.
.img-responsive
Makes an image responsive (will scale nicely to the parent element)
<img src="[src]" class="img-responsive" alt="[Alt]">
my header background image changes size when I change the width of my browser, to the point that if the width gets small enough, my image will get pushed out. I have background-size: 120%; and I know that's what's causing it. Would there be a way to set the minimal size of the background image via percentage? If not, how could I fix this?
You can vist my website at erraticfox.tumblr.com if needed a example of the problem.
Oh and here's my headers CSS code:
#header {
margin: auto;
display: table;
height: 300px;
width: 100%;
min-height: 300px;
min-width: 800px;
background: url('https://dm2013.s3.amazonaws.com/assets/img/background.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
background-position: 0px -650px;
background-size: 110%;
}
Here's a jsfiddle, you might want to resize the width of the result window and you'll see my problem: http://jsfiddle.net/2AbKb/
Its not resizing here. I have removed 'display-table' as i dont think it was necessary.
HTML
<div id="hed">
</div>
CSS
#hed{
margin: auto;
height: 300px;
width: 100%;
min-height: 300px;
min-width: 800px;
background: url('https://dm2013.s3.amazonaws.com/assets/img/background.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
background-position: 0px -650px
background-size: 110%;
background-color:black;
}
I'd suggest something like this:
#header {
margin: auto;
display: table;
height: 300px;
min-width: 800px;
background: url('https://dm2013.s3.amazonaws.com/assets/img/background.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
Lose background-attachment:fixed; Is that the effect you're after?