I'm currently tweaking the stylesheet of an online conference website so it looks better. I will be using Chrome's "Inspect Element" feature combined with the "Stylish" plugin to create & save the new stylesheet and then have Chrome replace the preexisting stylesheet with my edited version, client-side (i.e. the function of the plugin). The one area I'm having difficulty with is replacing the image banner, as it's an image in the HTML of the page instead of on the stylesheet (see screenshot):
http://i.imgur.com/JRrYkvd.jpg
I am able to set a background image in the "bannerimgcell" class, but the http://mt215.sabameeting.com/SiteRoots/main/AgendaStorageRoot/Cobranding/000000ec87840000010d66d1e20a8001/En/US/Images/Banner.gif image remains on top of it. Is there any way to position a background image for this class on top of the image, so that it looks like a new image banner is there?
EDIT: Sorry if I'm not being clear. I'm trying to put a new header image over the preexisting one via CSS.
JavaScript Solution:
You can change the image source:
var newImg = "http://mt215.sabameeting.com/SiteRoots/main/AgendaStorageRoot/Cobranding/000000ec87840000010d66d1e20a8001/En/US/Images/Banner.gif"
document.getElementsByClassName('bannerimgcell')[0].setAttribute('src', newImg);
As the render layers are composed your CSS background will be below the img src.
Not really sure if this code will work. I am assuming that 'bannerimgcell' is the class of the img tag and its the first one.
CSS Solution:
.bannerimgcell:after {
background-image: url('someNewImg.gif');
/* width, height and position to match the overlaid element */
}
I think what you may be looking for is using:
position: absolute;
z-index: 2;
background-image: url('yourimage.jpg');
That would place whatever element is styled by those rules, up and above anything below it, provided that the element beneath it has a lower z-index (by default it would).
position:absolute means that you'll have to manually place the new CSS element over the existing content, and make sure that all the widths and heights align so that you don't see the old image below.
Related
I want to blur the background of a dive or any html containers without its inside elements.
Well I tried googling for it and found that it can be through html2canvas (creating image from beneath objects and then blur it) and also using -webkit-backdrop-filter has no effect yet.
What I want is a live blurred container similar to windows 10 menus background in the screenshot bellow.
I would blur the original background using Photoshop or something, and then put it as a background image and play with the position. like this:
container {
background-image: url("blurredbg.png");
background-repeat: no-repeat;
background-position: 30px 0px;
}
please refer to this page for more information about background positioning.
You can, of course, control the positioning dynamically with container.style.backgroundPosition="100% 0"; in javascript
I guess you can use the following stackoverflow answer to
check if div have elements
.
if elements are not present then you can use
document.getElementById("yourId").blur(); to blur your div you can refer learn more about blur
I am using jquery and ajax to load different pages into my index page. links are targeted to open in a specific DiV and for some reason Every page that I create seems to have this white border at the top. I removed the padding from the css but for some reason every page that I load into the div pops up with white border at the top with the text in it. I want to remove this white border and align the content area to the center. Please help me
the code is a bit much to post please visit my website for a live view... only working links are Roster, and Labels....
http://www.trillumonopoly.com
Just take the background-color css rule off body.
Also, every major browser has a devtools component nowadays - it is your best friend.
edit: I see that it's applied by bootstrap. You can override it by specifying body { background-color: none; }
By the way, I think it's bad practice to apply a background image to the html node. Instead, apply it to the body node.
I was looking at the source code for this website and I'm stumped as to how the background image on the header is implemented. Using Chrome's inspection tools, I can find nothing inside the ``banner-area` div, and no image styles on the div of any sort. How do they do it?
Edit: As #makadlcik pointed out, it is the page-header div that has the background. But then how did they create the banner-area div that appears to be inside the image? I realize that it is impossible for HTML to be inside an image but Chrome's devtools make it appear as such.
It is the background-image property of page-header-wrapper div.
link of the background image: http://static.squarespace.com/static/51c50433e4b05645eb845ef5/t/51e592d9e4b047a5486b868d/1373999833147/Web%207.jpg
You probably meant that you cannot put an html tag inside an <img> element, because it is a single tag, but that is not this situation. They created a div as a parent with background image. A div is a pair tag, so it can contain a child.
I am working on a drop down menu that I want to make completely with CSS. Within the link I will not only have text that needs to change when hovered over, but also an image. Changing the color of the text is easy. However I am not sure how to swap the images on the hover...
Here is what I want the result to look like:
Where the arrows will be small images that will switch when the link is hovered over. How do I do this using CSS?
http://www.w3schools.com/css/css_image_sprites.asp
Check Image Sprites - Hover Effect section.
Set the image as a background image to a div (with a set width and height), and you can change that value with css.
Ideally put both graphics into one image, so that you can just shift the background position and you don't get any flicker during the transition (Google "css image sprites").
I believe you'd need to use javascript to change the src of an embedded image.
You could also have two images and use display:block and display:none to show/hide them as appropriate, but I don't think that would be the best approach.
Use CSS background: url()... on an element you deem most applicable. Here is documentation and a walkthrough: https://developer.mozilla.org/en-US/docs/Web/CSS/background.
On a side-note, you may want to consider using a sprite as well, https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/CSS_Image_Sprites
I know I can't change the src attribute of an <img> tag with CSS. But is there a possiblity to hide the image from the src attribute, and set a background image on the <img> tag instead?
i thought something like that: moving the actual image with padding/text-intend etc. out of view and after that setting the background-image of the img-tag, so it looks like an other image.
Js is not an option, because it's about templating an existing page.
you could hide the image itself:
img#someid { display: none; }
and then (or before that if you wish) set background on the parent element.
You can do that by pointing the img src to a 1x1 blank gif image.
This is necessary if you don't want to add another div since all browsers handle missing images and empty src attributes differently. (chrome will add a border around the image if the image is missing for instance.)
Then you can change the images just by changing the background-image property.
UPDATE
You can also create image sprites for that and animate them by altering the background-position property. For instance:
Lets say that you have two 50px wide images and you want the second one to show when that element is hovered. Just merge them together in one image, and the css above would do the trick.
img { background: url(sprite.jpg) 0 0 no-repeat; }
img:hover { background: url(sprite.jpg) -50px 0 no-repeat; }
I'm not quite sure what you mean with 'hide the image of the src attribute' but if you mean hide the link/path of the image you are displaying, using CSS (even as a background image) then the answer is no, not that I'm aware of. People can easily view your CSS file. The only real way to hide it is with JS, but even with that you can disable the JS from the client and still view it. You could put it in a DB like MySQL and display it using PHP but even at that, the image path would still be shown.
Would you be able to wrap the img in a div with no padding/margin, and make the img's display attribute to hidden (via js) so the div's background would be shown.
But honestly, if you take the trouble to do this, you should just swap the src of the image via js.