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.
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'm renewing a webpage of a book publisher who has their books online. They have it in jpg but I'm migrating it to SVG. I'm doing a test of the book viewer and the only way I found to contain the SVG image to the container size was to make it a background image. It works perfectly in Chrome, but I'm having problems with Safari for Desktop and Mobile also. Both of them shows up the SVG image but they miss an essential part of it.
I uploaded it for you to see what I'm talking about:
http://www.edicionesbabilonia.com/svg.html
I attach the code I've been using:
<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN”
“http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”>
<html>
<head>
<style type="text/css">
body, html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.divsvg {
border: 1px solid #999;
height: 100%; /* collapse the container's height */
width: 50%; /* specify any width you want (a percentage value, basically) */
/* apply a padding using the following formula */
/* this formula makes sure the aspect ratio of the container equals that of the svg graphic */ /* create positioning context for svg */
background-image: url(pv-58.svg);
background-size: contain;
background-repeat: no-repeat;
}
#left {
float: left;
background-position: right center;
}
#right {
margin-left: 50%;
background-position: left center;
}
</style>
</head>
<body>
<div class="divsvg" id="left">
</div>
<div class="divsvg" id="right">
</div>
</body>
</html>
Apparently there is a bug on Webkit that needs to load it as an object. It is possible to load it as an object and hidden it...
I've got the answer from: SVG with embedded bitmap not showing bitmap when using <img> tag in webkit browser
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 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;
}
I am writing a CSS stylesheet to add a background image to a div identified by its class name as follows:
.scrollingResultsContainer
{
background-image: url(https://mdl0133/widget/Images/gradient.gif);
background-repeat: repeat-x;
background-attachment: fixed;
color:#FFFFFF;
}
This works fine except I have one particular situation where I do not want the image to appear in the scrollingResultsContainer. How can I specify that the image should be applied except when the scrollingResultsContainer happens to contain a div with a particular id?
Unfortunately, I am unable to amend the markup to prevent this situation from occurring.
I was wondering if it can be done using CSS3 selectors.
You can't do this with CSS. A parent selector has been proposed many times but is always rejected because apparently it's just too hard to code or something:
http://www.css3.info/shaun-inman-proposes-css-qualified-selectors/
You'll have to use javascript I'm afraid.
CSS4 might make this possible in the future, see http://davidwalsh.name/css4-preview.
Over-ride it in the CSS if you know the ID in advance.
.scrollingResultsContainer {
font-size: 200%;
}
#id_of_div {
font-size: normal;
}
If the only thing you want to do is prevent the image from showing up, this is fairly simple with CSS. You can use the ::before pseudo-element on the child <div> to cover the image and z-index to get the layers right.
Demo:
Output:
CSS:
.scrollingResultsContainer {
background-image: url( 'http://placekitten.com/100' );
border: 1px solid black;
display: inline-block;
height: 100px;
position: relative;
vertical-align: top;
width: 100px;
z-index: -2;
}
.dont-show::before {
background-color: white;
content: '';
display: block;
height: 100%;
position: absolute;
width: 100%;
z-index: -1;
}
HTML:
<div class="scrollingResultsContainer"></div>
<div class="scrollingResultsContainer">
<div class="dont-show">don't show</div>
</div>
<div class="scrollingResultsContainer"></div>
<div class="scrollingResultsContainer"></div>