Hi I have an image which should be background image I have written a div and inside div I maintained some style for it and its working fine in Chrome and mozilla firefox , but its not working in IE8+ versions. below is the div that I used in my html.Do someone please respond to this.
<div style= "background:url(../portal/images/AWI_logo.png) no-repeat; background-size:100% 100%;">
You can use background-size: cover;
<h2>background-size: cover;</h2>
<div id="cover"></div>
div {
width: 900px;
height: 400px;
border: 1px solid black;
margin-bottom: 1em;
background-image: url(img.jpg);
background-repeat: no-repeat;
}
#cover { background-size: cover; }
see sample here you can learn more from csstricks here
Related
Im using an svg as background for my html site. It works fine on most Desktops and a few broswers like Chrome on android, but in other browsers, there is this weird white blank area beneath the image. Any idea why this is happening? Here's what I mean - https://imgur.com/a/1ui6QeR
This is my styling right now. Any help would be appreciated.
html {
background: url('Bubble.svg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100vh;
overflow: hidden;
-webkit-touch-callout: none;
-webkit-user-select: none;
-webkit-tap-highlight-color: transparent;
}
body{
height: 100vh;
margin: 0;
display: grid;
place-items: center;
font-size: 10px;
}
It works completely fine on Chrome, but is offset to the right and bottom on firefox mobile, and is not displaying properly on edge mobile too.
Try to add 100% 100% instead of center center.
I would suggest to add the background image to a container in body rather to the html. Wrap your contents in a div and add image to that.
.bgImg{
background: url('https://www.w3schools.com/howto/img_forest.jpg') 100% 100% no-repeat;
background-size: cover;
height: 100%;
width: 100%;
min-height: 100vh;
}
<div class="bgImg">
</div>
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
On my website, I want that the background does not move at all, while the content scrolls in the foreground normally over the background. This effect is working perfectly on my macbook. I have tested it with Safari, Chrome and Firefox. Now when I open the website on my iPhone, the background images are covering the whole div container, not just the screen, which means that the image is way too big and not sharp anymore.
HTML:
<div id="tf-home" class="text-center">
<div class="overlay">
<div class="content">
<h1>EURE <strong><span class="color">FLUCHT</span></strong> beginnt an diesem Ort</h1>
</div>
</div>
</div>
CSS:
#tf-home {
background: url(../img/header.jpg);
background-size: cover;
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
min-height: 100%
color: #cfcfcf;
}
I hope that someone can help me.
Thank you in advance :)
here you have a jsfiddle
#tf-home {
background: url(https://www.google.com/work/images/logo/google-for-work-social-icon.png);
background-size: cover;
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
min-height: 100vh;
color: #cfcfcf;
}
I have a website with a large background image. Now I want to add circle buttons/links that also have background images.
It renders fine in Chrome and IE, but Firefox shows an ugly box with the same background-color that the <body> has.
The problem seems to appear as soon as you combine background-attachment: fixed; on the outer container with border-radius on the circle button.
I suppose this is a Firefox bug. Anyone has a workaround for this?
P.S.: If I run it here via "Run code snippet", it renders correctly in Firefox! Why is that?!
Chrome/IE (both circles are correct):
Firefox (second circle, where the pink box has background-attachment: fixed;, is broken):
body {
background-color: gray;
}
#wrapper1 {
width: 100px;
height: 100px;
background-image: url("http://www.edda-hsu.net/images/ProductImages/Fabrics/BasicFabrics/smooth-velvet-magenta.jpg");
margin-bottom: 40px;
}
#wrapper2 {
width: 100px;
height: 100px;
background-image: url("http://www.edda-hsu.net/images/ProductImages/Fabrics/BasicFabrics/smooth-velvet-magenta.jpg");
background-attachment: fixed; /* PROBLEM */
}
.box {
display: block;
background-image: url("https://d2d00szk9na1qq.cloudfront.net/Product/ac6714d6-578e-42d4-b81f-aaf7a7e5d580/Images/Large_CV-174.jpg");
background-attachment: fixed;
border-radius: 50%; /* PROBLEM */
width: 50px;
height: 50px;
}
<body>
<div id="wrapper1">
<div class="box"></div>
</div>
<div id="wrapper2">
<div class="box"></div>
</div>
</body>
I have the following code:
.container {
width: 1rem;
height: 2rem;
background-image: url(https://dl.dropboxusercontent.com/u/1142760/static/svg/triangle.svg);
background-size: 100% 100%;
border: 1px solid black;
}
<div class="container"></div>
I expect the background image of the div to be stretched to the full width and height of said div.
Firefox behaves as expected:
But Chrome appears to have a bug that makes it interpret background-size differently:
You can see the live result in this fiddle
Re-creating the background image would not be a solution, as the div in question is of variable height.
Is there a work-around for this Chrome bug?
Maybe someone will find this post and not find the right answer.
I found out that in my case, i had to add an attribute to my svg File:
<svg preserveAspectRatio="none" ...
Well, maybe not the best solution, but at least it works fine for me in Chrome.
But you have to set the height (transform-scale) of the inner div with JQuery, according to your browser on load. Not really nice, but it works.
Also watch out for the -webkit-background-size.
As you can see, a lot of problems.
HTML:
<div class="container"><div id="picture"></div></div>
CSS:
.container{
width:1rem;
height:2rem;
border:1px solid black;
}
#picture {
width: 100%;
height: 100%;
background-image:
url(https://dl.dropboxusercontent.com/u/1142760/static/svg/triangle.svg);
-webkit-background-size: 100%;
-webkit-transform: scale(1,2);
}
http://jsfiddle.net/y0j5tejw/3/
Try this css for your code, it will definitely resolve your query.
.container{
background-image: url(https://dl.dropboxusercontent.com/u/1142760/static/svg/triangle.svg);
background-size: 100% 100%;
border:1px solid black;
float: left;
background-repeat: no-repeat;
width: 5%;
height: 30px;
}