I have a pattern background image that is repeating itself on the body tag
The image is 256x256 pixels.
body {
font: 12px/1.4 Helvetica, sans-serif;
color: #fff;
background-image: url("img/bg1.jpg");
background-repeat:repeat;
}
#bg2{
?
}
#wrap{
width:960px;
margin:0 auto;
}
Then i'v got a second image, which i want to be fixed in the center of the screen overlapping the body image. This image is the second bacground image, it does not need to repeat itselft. Dimensions: 400x800px.
This 2nd image looks the same as the first on the edges, but has some lightning in the middle, so you sea, i need maybe some sort of transparency.
The HTML:
<body>
<div id="wrap">
<div id="bg2">..here comes the 2nd bkground image..</div>
....content
</div>
</body>
Problem is, multiple bacground image is not so easy to acomplish. Can somebody help?
Try something like this:
#bg2 {
position: absolute;
height: 100%;
width: 100%;
background: url('img/bg2.jpg') no-repeat fixed center;
/* IE transparency */
filter: alpha(opacity=60);
/* standard transparency */
opacity: 0.6;
}
Related
My problem is that it doesn't replace the logo itself, I have been trying to solve this problem for a few days now during some of my spare time (I am new, hence why it has been so long).
Not sure how to solve this problem.
Code and Image below to provide more detail:
.navbar-brand {
width:200px;
height:200px;
box-sizing:border-box;
padding-left: 200px;
/*width of the image*/
background: url(https://web.archive.org/web/20180921071933im_/https://www.rolimons.com/images/logo-56x56.png) left top no-repeat;
}
The first R logo is supposed to replace the second R logo, instead it creates a separate one
Without seeing your HTML my guess is there is a child element inside .navbar-brand. So when you add the background image and padding-left you are making room for your new logo but the old one is still there.
If you inspect the logo area I bet you have an img element, another element, or a pseudo element that you have to style or hide like one of these:
Style:
.navbar-brand .some-other-element-class {
width: 200px;
height: 200px;
box-sizing: border-box;
padding-left: 200px;
/*width of the image*/
background: url(https://web.archive.org/web/20180921071933im_/https://www.rolimons.com/images/logo-56x56.png) left top no-repeat;
}
Hide:
.navbar-brand img {
display: none;
}
.navbar-brand::after {
display: none;
}
Edit
I think you're site is https://www.rolimons.com/ based on the image url, if so then my assumption that there is an img tag as a child of .navbar-brand is correct.
If you want the "new" logo to replace the old one you can use the hide technique above, BUT replacing the img src would probably be the better path forward if you can change that.
If You want to replace the logo with CSS you can hide the old logo image and set the new logo image as a background image.
<div id="logo_outer">
<img src="Logo.png">
</div>
<Style>
#logo_outer {
width: 200px;
height: 200px;
background-image: url(img url );
background-repeat: no-repeat;
background-position: center;
background-size: auto;
}
#logo_outer img {
display: none;
}
</style>
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/
I try to get css sprite working on my page. but if I adds background-repeat:no-repeat. then the css sprite stops working. If I remove it from my stylesheet, will work again.
I couldn't figure out why I cannot use background-repeat.
here's my code. I also upload it to jsfiddle, you can test it there.
http://jsfiddle.net/F49b5/2/
<html>
<head>
<style type="text/css">
#logo a, .vote-up-off, .vote-up-on, .vote-down-off, .vote-down-on, .star-on
{
background-image: url("http://i14.photobucket.com/albums/a332/007bond-jb/food/burger2.jpg");
overflow: hidden;
background-repeat: no-repeat; /*this is the problem, remove it, it will work */
}
#logo a, .vote-up-off, .vote-up-on, .vote-down-off, .vote-down-on, .star-on, .star-off, .flag-off, .vote-accepted-off, .vote-accepted-on
{
font-size: 1px;
text-indent: -9999em;
}
#logo a
{
background-position: 0 194px;
width: 309px;
height: 133px;
display: block;
}
</style>
</head>
<body>
<div id="logo">
test
</div>
</body>
</html>
Try switching your background-position to -194px instead of 194px:
#logo a
{
background-position: 0 -194px;
width: 309px;
height: 133px;
display: block;
}
By setting the y-axis to 194px, it will push the background image down 194px, which is out of the view of your #logo height. Instead, you'll want to "pull up" the image by setting the y-axis to a negative number.
You have set the background position outside of the height of the box.
Repeat repeats the whole image from 0:0 of the element which is why you see it.
Remove your background position and it will work.
I'm curently workign on this page and I'm trying to make the background repeat-y from a certain height but to no avail. If you look at the link's background (bottom area); you'll see that it leaves a an ugly space there, which is ugly. The CSS is as show below
body {
font-family:Calibri;
font-size: 16px;
margin: 0px;
padding: 0px;
background-color: #000;
background-image: url(images/bg.png);
background-repeat: repeat -200px 0px;
}
There's no way I'm aware of that makes the repeat skip some pixels. If I were you I would split them so the background-image of the body would be what the majority of it is now without the top. And then I would add a div to the top with these settings:
<div id="upperpart"></div>
in css:
#upperpart{
background-image: url(whatever it is);
width:100%;
height:how high it is
background-repeat: repeat-x;
margin-bottom: minus its height; <-- this will make everything below this div get ontop the div
}
After some mathematical thinking and experiments, the line of code below did the magic. I had to also watch where to cut it off with -1530px. Make sure you use the same background you used with the body tag.
html {
background: url(images/bg.png) repeat 0px -1530px;
}
Hi there I am trying to make and image on top of another in 1 tag.
Basically I want an image to be the banner on top, so repeat-x
then under it I want the background image repeated multiple times
So something like this
body
{
background:url(banner.jpg); repeat: repeat-x;
background:url(background.jpg);
}
not 100% sure how to do it...I think that explains how I would like it.
I may also want something on the bottom added later so like after that background is done I would want something like background:url(footer.jpg) repeat: repeat-x; bottom
Im thinking this is what youre after.
http://jsfiddle.net/wpqDy/
html {
height: 100%;
width: 100%;
background: url("bg.jpg") repeat 0px 3px;
}
body {
background: url("bg_top.jpg") repeat-x top left;
height: 100%;
width: 100%;
}
You'll need to put background images on two different containers. Perhaps something like this:
<body>
<div id="page">
<div id="content">
...
</div>
</div>
</body>
#page
{
background:url(background.jpg);
}
#content
{
background:url(banner.jpg); repeat: repeat x;
}
CSS3 has support for multiple backgrounds on a single element; this is relatively widely supported, except for IE <= 8. You can write the following:
body
{
background-image: url(banner.jpg), url(background.jpg);
background-repeat: repeat-x, repeat;
}