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>
Related
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%;
}
.navigation-card{
background-image: url("https://www.sustainablewestonma.org/wp-content/uploads/2019/09/facebook-square-brands-blue.png");
background-repeat: no-repeat;
background-position: center;
height: 1000px;
width: 700px;
}
<html>
<head>
<title>Webpage Components</title>
<link rel="stylesheet" type="text/css" href="./Styles/main.css">
</head>
<body>
<div class="navigation-card">
</div>
</body>
</html>
It should show an image but its not. The code works when I use a web link like above for the image but it doesn't work when I give a path of a local file on my computer.
You are usign image as background but you are not setting the background size, You just are setting the container size, so you have to add the next rule to your css class:
background-size: contain;
or
background-size: 700px 1000px;
From: https://www.w3schools.com/cssref/css3_pr_background-size.asp
"contain" -> Resize the background image to make sure the image is fully visible
The reason is it not centered is because you have set the width of the container to only 300px. The image is taking up that full width. If you removed the width from navigation card, it will be centered.
Alternatively, you can add the following style to the card and it will center.
margin: 0 auto;
So you'll end up with this
.navigation-card {
background-image: url("https://www.sustainablewestonma.org/wp-content/uploads/2019/09/facebook-square-brands-blue.png");
background-repeat: no-repeat;
background-position: center;
height: 300px;
width: 300px;
margin: 0 auto;
}
to center a background image you shoud add margin: 50% auto; that make the image in the center of the page or margin: 0 auto; to make it in the top
I have this CSS style here, but it spans across the whole screen rather than just repeating it within the 960px width of the body.
body
{
width:960px;
margin: 10px auto 10px auto;
background-image:url(logo.png),url(backgroundimage.jpg);
background-position: top center, top center;
background-repeat: no-repeat, repeat-x;
background-attachment: static;
}
logo.png is just an image of a company logo, while backgroundimage.jpg is something I want to span only within the 960px rather than across the whole page. How can I do this?
You will need to make a container class. This class will hold all inner div classes and content.
The code for this will be as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
.container{
width: 960px;
background: url("logo.jpg");
height: 700px;
}
</style>
<body>
<div class="container">
</div>
</body>
</html>
An easier way to do this would be to use bootstrap. The Bootstrap framework provides a .container class premade with custom responsiveness built in.
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'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.