I have div with next styles:
.top-pattern {
width: 1024px;
height: 92px;
background-image: url("https://s21.postimg.org/p0amqt8wn/pattern-top-big.png");
background-repeat: repeat-x;
background-size: contain;
}
It is pretty simple and works great. But at some devices (mac and mobile) there is weird line appeared under the div. What is this? How to remove it?
Example: https://jsfiddle.net/wx92fb61/
Screenshot: https://gyazo.com/3020d6720d27fcbd0315a55fce0fb016
P.S. I checked my image hundred times: there is NO line in the image.
you css must be like, for example :
#media (min-width:768px;){
.top-pattern {
width: 1024px;
height: 94px;
background-image: url("https://s21.postimg.org/p0amqt8wn/pattern-top-big.png");
background-repeat: repeat-x;
background-size: contain;
}
}
#media (max-width:768px;){
.top-pattern {
width: 100%;
height: 94px;
background-image: url("https://s21.postimg.org/p0amqt8wn/pattern-top-big.png");
background-repeat: repeat-x;
background-size: contain;
}
}
in phones or tablets you better have a width of 100% than a pixel value, then you should add a initial scale in the head part of your html to catch a fixed value for the devices.
See, if you can override this CSS class and remove box-shadow.
I think this is what is getting you that border.
.image-box-component .image-viewer {
box-shadow: 0 0 0px rgba(0,0,0,0) !important;
}
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 wish i never had to ask this but im confused.
So i have a basic background image on my div and for some reason when i set the background-size: 246px 70px; it does not work, only if i use !important it works.
.footer div.image-logo {
height: 70px;
width: 246px;
background-size: 246px 70px;
background-position: center;
background: url(/images/svg/five_Logo.svg) no-repeat;
margin: 20px auto;
}
Now basically you would think other css is overwriting it, well thats my rookie thought but it is not, when i inscpect the div with the background image, and click the tab "computed" to check the current state of the background-image-size it says background-size:auto;, and when i click on this to see where it gets the property auto it shows 246px 70px style.css?ver=1.0.5:2266 .footer div.image-logo which is the css where i set my background size to background-size: 246px 70px;.
I would like to be able to set the background size without using !important
The background shorthand includes background-size:auto and this is overriding your previous background-size statement.
Put the background-size statement after the background shorthand statement.
div {
width: 400px;
height: 300px;
margin: 1em auto;
}
.one {
background-size: 200px 100px;
background: url(http://www.placebacon.net/400/300) no-repeat; /* I win */
}
.two {
background: url(http://www.placebacon.net/400/300) no-repeat;
background-size: 200px 100px; /* I win */
}
<div class="one"></div>
<div class="two"></div>
Syntax is;
background-image
background-position
background-size
background-repeat
background-attachment
background-origin
background-clip
background-color
Ex:
body {
background-image: url(photo.jpg);
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-origin: padding-box;
background-clip: border-box;
background-color: #ccc;
}
Therefore you might want to re-order. (Clear cookies as well)
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
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%;
}
I'm setting up an image that would change when you hover over it. I want the image to be adjustable so that it is full screen on any screen. Instead of putting a pixel size I tried to put a percentage size, but nothing shows up. Is there a better way to get that done?
<style type="text/css">
.urlImg {
display:block;
width: 1000px;
height: 848px;
background-image: url('01.jpg');
background-repeat: no-repeat;
}
.urlImg:hover {
background-image: url('02.jpg');
background-repeat: no-repeat;
}
</style>
</head>
<body>
<center></center>
</body>
Use background-size combined with width and height of 100% (make sure the body extends to 100% as well):
.urlImg {
display: block;
width: 1000px;
height: 848px;
background-image: url('http://a5.mzstatic.com/us/r30/Purple5/v4/5a/2e/e9/5a2ee9b3-8f0e-4f8b-4043-dd3e3ea29766/icon128-2x.png');
background-repeat: no-repeat;
}
.urlImg:hover {
width: 100%;
height: 100%;
background-image: url('http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
}
html, body {height: 100%; margin: 0}
(see it on the Full Page as well)
You can also play with absolute or fixed positioning (as #abhishek mention in the comment) to make it behave the similar way.