I'm trying to set a background image in my landing page, but it's not showing up.
Inside the body and outside any other divs, I set this div, without any content (image):
<div class="bg">
</div>
And, in the CSS I put this:
body {
color: white;
background: #afbe5c;
}
.bg {
background: url('./assets/bg.jpg') no-repeat center;
background-size: cover;
height: 100%;
}
But when I go on live server, it's not showing the image.
I've change the name of the image. I've tried to put the div inside the header and it didn't work.
Related
for some time we are struggling with white lines at the edge of the image containers. It occurs when we use the image with src or html elements with background image in css, mostly on mobile views. We tried these scenarios:
div with background-image, background url
div with more than one background urls
images with position:absolute and container position:relative
The only half-solution seems to change image position to absolute while the container is relative and set for example top: -2px. But still, sometimes it occurs especially with zoom on mobile devices.
This bug can be seen between two sections too but only on a mobile device or google chrome developers' device toolbar.
White line bug image
html,body {
padding: 0;
margin: 0;
}
.parent-container {
height: 100vh;
background-color: #600cb5;
}
.child-container {
background-color: #600cb5;
height: 50vh;
}
.child-container:nth-child(2) {
background-image: url('https://res.cloudinary.com/dfvpybkta/image/upload/v1647105459/test/Frame_1_atbkfx.png');
background-repeat: no-repeat;
background-color: white;
background-size: cover;
}
<div class='parent-container'>
<div class='child-container'></div>
<div class='child-container'></div>
</div>
I have the following CSS at the root of the file (to check this issue Im about to explain):
.why-choose-us-image {
width: 100%;
height: 100%;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}
.why-choose-us-image.bg1 {
background-image: url(assets/images/bigdog.jpg);
}
And Im placing that div on a background as follows:
<div class="why-choose-us-image bg1">
</div>
But the image is not showing up. Even if I style="background-image......" the div, still not popping up on the background, but the image is there because it shows up if I insert it as an image! Super crazy.
Do you identify what am I doing wrong on the code? Thank you all.
Try this, because you should correct the address to your files
.why-choose-us-image.bg1 {
background-image: URL(../assets/images/bigdog.jpg);
}
Or this because width and height not define
.why-choose-us-image.bg1 {
height: 118px;
width: 118px;
}
I'm trying to create my page so that there are background images covering the side of the page while having nothing in the center as that's where the content will be. I want these images to stay fixed where they are, even if the user resizes the window so they're off-screen. I know how to at least set up the images but not how to keep them in place.
I think one example I can think of is how http://www.halolz.com/ is set up.
Usually the way this is done is by applying a background image to the HTML body and then placing all the content of the page into a container that's centered on the page.
HTML:
<body>
<div class="container">
My content
</div>
</body>
CSS:
html, body {
padding: 0;
margin: 0;
}
body {
background: red; /* change this to your background image */
}
.container {
background: white;
width: 400px; /* adjust this to the proper width */
margin: 0 auto;
}
JSFiddle: https://jsfiddle.net/13xaqh6z/
I'm trying to manipulate the sub pages and prduct details page to only have a very small image across the top. The look of the main "index" page is how I want that one to look.
Basically I want the image on the secondary pages to only show the top 300px of the image and the rest goes to the gray so you can see the products and wording against the solid gray color
current theme is Home iQ
thanks so much in advance
I've edited the theme css to get where i am now with the following code:
html {
background-color: #ebe9dc; 50% 0;
background-size: cover;
}
body {
width: 100%;
height: 750px;
background: url(http://www.sharkdigitalthinktank.com/images_pete/weed_background3.jpg) no-repeat center;
background-size: cover;
}
Try adding a class on the body tag of the secondary pages, like so:
<body class="secondary">
//HTML
</body>
Then in your CSS add the following class after the other body class:
body.secondary {
background-position: top;
background-size: 100% 300px;
}
Is this what you are trying to do?
I have used a background image on the webpage and used this code in the css which makes it nicely resize when browser is resized.
body{
background: url("images/back.jpg") no-repeat ;
background-size: cover;
}
I need to place some other image on top of the background image at a specific place ( vase on table) .but when i do that then the background gets resized but the vase image remains in the same place and same size when browser is resized as shown in second picture below.
see the vase in these two images
browser in full size
resized browser
how can i make the vase image also get resized just like the background
I recently ran into exactly the same issue creating a hidden object game which needed images placed on top of a background image to maintain their position regardless of browser dimensions.
Here's what I did:
You can include a template version of the background image as an actual <img> with visibility:hidden (so it's not visible but still takes up it's space in the DOM and base the size (and background image size) based on that.
HTML:
<div class="image-container">
<img src="http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png" class="img-template">
<div class="item"></div>
</div>
CSS:
/* This is your container with the background image */
.image-container {
background:url('http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png') no-repeat;
background-size:100%;
overflow-x: hidden;
position:relative;
}
/* This is the template that resizes the DIV based on background image size */
img.img-template {
visibility: hidden;
width:100%;
height:auto;
}
/* This is the item you want to place (plant pot) */
.item {
position: absolute;
left: 14.6%;
bottom: 80.3%;
width: 15%;
height: 15%;
background: yellow;
border: 2px solid black;
}
Here is a working example: http://jsfiddle.net/cfjbF/3/
Try making the image relative position and setting the alignment manually.
http://jsfiddle.net/cfjbF/1/
<head>
<style>
body {
background: #000000;
}
#image1 {
background: #008000;
position: relative;
left: 50px;
height: 50px;
width: 50px;
}
</style>
</head>
<body>
<div id="image1"></div>
</body>
Solution for your Problem:
https://stackoverflow.com/a/7660978/1256403
OR
http://buildinternet.com/2009/07/quick-tip-resizing-images-based-on-browser-window-size/