I'm having the following problem in IE10 under Windows8, just using plain and simple div with a repeat-x background and when using a transparent png artifacts appear.
Results:
http://s18.postimg.org/9tn3dlsqx/artifacts.png
Here's sample code:
CSS
div.field { height: 762px; background-image: url(../img/background_grass.png) repeat-x; width: 5000px; left: -700px; position: absolute; }
div.graphics { overflow: hidden; width: 3840px; position: absolute; background: url(../img/path_1.png); height: 640px; top: 315px; left: -1000px;}
And the html
<!DOCTYPE html>
<html>
<head>
<title>MyForest - Идея по-чисто</title>
<meta charset="UTF-8" />
<link href="styles/styles.css" rel="stylesheet" />
</head>
<body>
<div class="field"></div>
<div class="graphics"></div>
</body>
I'm having the same issue. Try changing the height or width of your image.
It seems to happen with large png background images that have a certain height to width ratio when they are repeated. In my case the image is 2000px wide by 1000px tall and the right side of the background ends up overlapping by 88 pixels (the background ends up being 2088 pixels. In my case I am using a transparent png with wrapping graphics that are slightly transparent. Even stranger, if I make the image 2000px by 2000px the problem goes away.
It's too bad... I was hoping IE had improved with version 10 and we wouldn't have to deal with these kind of quirks anymore.
Related
This is a very simple problem and so I must be doing something very silly: I cannot get a background image to be replicated properly inside a div.
I have reduced it the the following small example. I have a main div with a specific pixel size, and constrained to be a certain amount less than the current viewport. Within that, I have a second div that contains a fixed (non-scrolling) background image. I need to have the image in a separate div so that its opacity doesn't affect anything else.
This example tries to get a background image to be replicate 2x2 in the main div (i.e. width and height = 50%), but all the combinations that I try are basing this on the the viewport size and not the parent div size.
NB: you will need to run this example in full-screen mode to see what I mean. The main div is less that the viewport and I cannot get an integral 2x2 replication of the image.
<!DOCTYPE html>
<html>
<head>
<title>Test background</title>
<meta charset="utf-8"/>
<style>
div.tp-main {
background: #f0f0f0;
border-style: solid;
border-width: thin;
margin: 0px;
padding: 0px;
max-width: 99vw;
max-height: calc(52.294vw - 23px);
width: 1090.00px;
height: 570.00px;
}
div.tp-bg { /* Separate div to avoid opacity affecting other stuff */
width: 100%;
height: 100%;
background-image: url("https://clipartart.com/images/tree-branch-clipart-png-4.png");
background-size: 50.00% 50.00%;
background-repeat: repeat;
background-position: 0 0;
background-attachment: fixed;
opacity: 0.20;
}
</style>
</head>
<body>
<div class="tp-main">
<div class="tp-bg"></div>
</div>
</body>
</html>
I want to have my background as gradient and the image on top of the gradient, it worked just fine until I set overflow to auto since my div tag expands on mobile view which makes overflow hidden for the html tag not reliable so I made the image as a tag
.background_image {
position: absolute;
left: 0;
top: 0;
opacity: 0.3;
width: -webkit-fill-available;
height: -webkit-fill-available;
}
EDIT
I have made the image's position fixed so it keeps following the scroll position which wasn't exactly what I needed but It'll do.
EDIT 2
The problem was I was using linear gradient bg on behalf of the image which was a tag inside the body element, i fixed it by letting that image at fixed position and the change bg to radial gradient and making that gradient only styling the body tag which did solve the whole problem
Please check below code taken from here
body,
html {
height: 100%;
margin: 0;
}
.bg {
/* The image used */
background-image: url("https://via.placeholder.com/800");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="bg"></div>
<p>This example creates a full page background image. Try to resize the browser window to see how it always will cover the full screen (when scrolled to top), and that it scales nicely on all screen sizes.</p>
</body>
</html>
You can use the background with url property:
.background_image {
background: url(YOUR_IMAGE_URL) no-repeat center center fixed;
width: 100%;
height: 100%;
}
I'm working on a project where I have a hero image as a background-image for my html headertag.
Directly below that I have a flex container with two items in that space themselves throughout the viewport window and resize according to the viewport size. This looks fine when the browser window is at a large viewport size, however, when I start scaling the window down, there begins to show a bit of whitespace between the hero image and the flex container. I would like that flex container to always stay directly at the bottom of the hero image.
I realize that this is probably because the hero image has a fixed height on it and is not flexible because it is always going to be trying to render the height at 700px regardless of the viewport size.
I also know that you can resize this based on breakpoints in your CSS, but I just wanted to see if there was another way to do it.
I have attached screenshots so you can have an accurate read of what it is that I am asking
Here is my viewport window at a large size: http://i.imgur.com/J81b7OO.jpg
Here is my viewport window at a slightly smaller size: http://i.imgur.com/CfjAyZG.jpg
For further clarification:
Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type = "text/css" href="css/normalize.css">
<link rel="stylesheet" href="css/build/main.css">
<title>Summer Breeze</title>
</head>
<body>
<header class = "hero">
</header>
<div class = "container">
<div id = "stay">
<div id = "staySquare"></div>
</div>
<div id = "gazebo">
<div id = "gazeboPic"></div>
</div>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script src="js/build/app.min.js" type="javascript"/>
</body>
</html>
Here is my SCSS:
/*-----------------------------------------------
* Base
-----------------------------------------------*/
$light-brown : #ddcebb;
body {
margin: 0px;
padding: 0px;
}
/*-----------------------------------------------
* Hero
-----------------------------------------------*/
.hero {
background-image: url("../../img/house_front.jpg");
background-repeat: no-repeat;
background-size:100%;
height: 700px;
}
.container {
display: flex;
height:260px;
}
#stay {
background-color: $light-brown;
font-size: 100px;
padding:30px;
width: 45%;
#staySquare {
margin: 0 auto;
display: flex;
height: 200px;
width: 100%;
border: 2px solid black;
}
}
#gazebo{
background-color: mistyrose;
width: 55%;
#gazeboPic {
background-image: url("../../img/walkway-to-Beach.jpg");
background-repeat: no-repeat;
background-size: 100%;
}
}
Thanks in advance!
EDIT: White space issue has been solved with background-size: cover; or alternatively background-size: auto 100%. The issue I am running into with this is when I resize the viewport window, the right side of the hero image is getting cropped off as I am making it smaller while the flex container is moving with the viewport window. Is there any way to keep this centered as I'm resizing?
Here is a screenshot : http://i.imgur.com/RNSWVTq.jpg
I am working on a webpage which contains an header logo. This logo has two logo's in it: one with a transparent background and one with a orange background on the right. The image is like 3.000 pixels wide. I want to resize the image to let both logo's fit in the div horizontally. So that on every device I will see the logo's and a part of the orange background (what makes the image that long.
HTML
<div class="logo-header"><img src="logo.png"></div>
CSS
.logo-header {
overflow: hidden;
}
It indeed overflows nicely as I would want it, but when I use an iPhone 4 or some other small screen I am failing to get it have a minimal width.
Is this possible in CSS or is this something I should do with Javascript?
.logo-header {
background-image: url("http://bighugelabs.com/img/nbcam/ribbon_3000_bg_sh.png");
background-size: contain;
background-repeat: no-repeat;
height: 20vh;
width: auto;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="logo-header"> </div>
</body>
</html>
if you check this image it's 3000px wide.
First of all, i recommend you optimise your image (try tinypng.com) and resize it using paint or some such (rezize before you optimize).
then use background cover and set it as a background image
Maybe you can try to split your image in two images.
With CSS, you then insert the second image (with orange background) as background-image of .logo-header, aligned to the right.
I have a sketch in pixels 1280 x 1024 and I want this sketch as background image of my html page and whatever else I show on the webpage will come on top of this image as div elements
I've seen this being done on many sites but when I put the image in the background it becomes so that I have o scroll the page horizontally.
Below is my css
body #background img {
left: 0;
min-width: 1024px;
position: absolute;
top: 0;
width: 100%;
z-index: -2;
}
<link rel="stylesheet" href="/stylesheets/style.css" type="text/css" media="screen" charset="utf-8">
<body>
<div id="background">
<img src="images/Sketch1.jpg">
</div>
</body>
Update
putting image in background with no-repeat cuts the image down.
I've put an example here: http://jsbin.com/ekaxum/2
body {
background: url(url_here) no-repeat;
-webkit-background-size: contain;
-moz-background-size: contain;
background-size: contain;
}
From the CSS 3 specification:
‘contain’: Scale the image, while preserving its intrinsic aspect ratio (if any), to the largest size such that both its width and its height can fit inside the background positioning area.
Hi Mike and welcome to Stackoveflow.
Just add the height:100%; property to the image's CSS style. The problem is that it's height is more than your actual window size so the vertical scrollbar appears. It changes the available window width and that's why you see the horisontal scrollbar.