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>
Related
I'm using bootstrap 'featurette' feature. On the page there is a text on the left and image on the right. when you shrink the browser size, they go on top of each other, with the text at the top and the image at the bottom. How do I change this so that the image is frist and then the writing underneath?
Ad example is here http://getbootstrap.com/examples/carousel/
If you notice the feature part you will see what I mean when you resize.
I have tried changing the float position as thats the only thing I can think of but it didnt work.
P.s just to clarify, I still want them the same place when over 756px (or whatever the size is) but just want the image at the top when it changes size in the example above.
You should use display:flex property to the container for both and use order property for the elements for example is below. Try changing the order of the elements and have a look.
.elements-container{
background: #000;
width: 100%;
height: 500px;
display: flex;
}
.text-box{
order: 2;
width: 200px;
height: 200px;
color: #ffffff;
background: #ff0000;
display: block;
}
.image-box{
order: 1;
width: 200px;
height: 200px;
display: block;
}
<div class="elements-container">
<div class="text-box">This is text</div>
<div class="image-box"><img src="http://lorempixel.com/200/200" /></div>
</div>
i have a the following code for a following image path in web project of visual studio solution
Folder1\Images\banner.png'
<div id="placeholder">
</div>
and the css to set the background for this is
#placeholder {
position:relative;
width: 40em;
margin:auto;
height:4em;
margin-top: -1em;
padding-top: 2em;
background-image:url('../folder1/Images/banner.png');
/* background('('../folder1/Images/banner.png') */
background-size: 40em;
background-repeat:no-repeat;
clear: right;
}
I also tried with ~ instead of ../ symbol but it doesnt work.
Should i use background-image or background attribute to set the background image of the div. whichever attribute i use i don't get any image in the background.
please help.
You need a add a width and a height of the background image for it to display properly.
So you want something like
#placeholder {
background-image:url('../folder1/Images/banner.png');
height: 100px;
width: 100px;
}
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 have an image container based on Jquery Mobile listview element structure.
Looks like this:
<li>
<div class="ui-btn-inner">
<div class="ui-btn-text">
<a>
<img src="img/products/l/demo2.jpg">
<h3>product2</h3>
</a>
</div>
</div>
</li>
I'm overriding JQM-CSS to create an image gallery-list. Images and h3 are both contained inside a link element. As the images can have different heights, I want to set a CSS fixed-height/overflow:hidden to the link element to cut off images at the top using vertical align: top.
Here is my CSS so far:
li {
display: inline-block;
min-width: 200px;
max-width: 300px;
width: 24%;
}
li img {
width: 100%;
position: static !important;
max-width: 185px;
max-height: inherit;
}
// fix height and overflow hidden
li a {
height: 100px;
overflow: hidden;
vertical-align: bottom;
}
It doesn't work... If I check on Firebug, the element-height is set to 100px, but it covers the image top versus covering the image bottom and h3, which I do not want to crop away.
I have tried setting line-height to 100px as well, but this does not work at all.
Any hints on what I'm doing wrong?
Thanks!
EDIT:
Can't use clip either, because I don't know at what height I want to start (img.height-100px) and I cannot clip from the bottom. Or can I?
SOLUTION:
It would work like this:
li a {
position:absolute;
bottom: 0;
left: 0;
}
li div.ui-btn-text {
position: relative;
height: 100px;
overflow: hidden;
}
Doesn't use vertical-align but the result is ok.
I'm afraid that can't work. Adding display:block; to your link and would be a start for your method, but check the result: http://jsfiddle.net/uu96D/
vertical-align: bottom; won't push the a tag to the bottom of the container. Here is a guide of how vertical-align works: http://phrogz.net/css/vertical-align/index.html
To solve your problem i'd go to some js solution, and add a negative top margin to the image if its taller than, for example, 80px. Here's a fiddle with the result: http://jsfiddle.net/uu96D/1/
And the code using jQuery:
$('img').each(function(){
var height = $(this).height();
if (height > 80) {
$(this).css({marginTop: "-" + (height-80)});
}
});
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>