I am by no means a coder but I know I need to fix an image source bug in my individual tumblr post CSS. I must have a shoddily coded theme that makes me have to manually put in the image source code for each photo in photo sets. But when I click on the HTML on an image post, I can't actually edit the CSS but just the html. Can you even do that?
I figured it out!
Before:
{block:PermalinkPage}{PhotoURL-500}{/block:PermalinkPage}
After:
{block:PermalinkPage}{PhotoURL-HighRes}{/block:PermalinkPage}
I'm not clear why you can't edit your css. But if that's the case you can try styling your images by using style within your < img > tag.
<img src="your-img-path" style="height:100px; width:100px;" />
Related
enter image description hereI need to remove a picture (using css) if a device visits that is a mobile user. I’ve tried media queries with the display:none and many other things And nothing. Maybe I’m just not using proper syntax or putting it in the right spot? Some help would be greatly appreciated. Thanks!
In the example you've posted, the stylesheet is targeting the class:
.post .sc_image img
but your code example only shows an image tag without the parent containers that have the .post .sc_image classes.
You'd expect to see the image inside some divs (etc) like this:
<div class="post">
<div class="sc_image">
<img />
</div>
</div>
For your example to work correctly, remove .post .sc_image out of your css.
However, I'd guess that these other classes are because your complete code has more to it than just the tag sitting by itself. With that in mind, I would assume that some other style within your application is overwriting the display:none property.
I have to make an html page without using css...
the problem is that, that i want to use div tag and add an image as my background and write some content over the image, so please suggest me ways to do it.
Thanks in advance!
Some examples, with this you don't need to include/insert all css file
<body style="background-image:url('http://example.com/background.png')">
or
<div style="background-image:url('bakground.png')">
Without css you can't set background
I'd like to define the appearance of my images inside the section (I'm trying to add a border to the image - but I can't reference the image directly because the images are added dynamically - as content of blog posts.)
Can you advise me on how to do that?
Do I have to create a new section/id/div? How can I than say to the machine: In the section/id/div I created I would like you to apply these styls to the images."
?
thanks, D.
Yes you need to get a reference to the image or the block in which the images is going to be displayed. Then apply the css rules to the image or block you will then get the styles on the image. I would prefer class="" if there are many and id="" if there is only one.
If you have img inside any elements like below,
<div class="someclass">
<img src="" />
</div>
then at CSS,
.someclass{
your rules go here.
}
or if you want to directly have styles on image then you HTMl will be like below and CSS same as above.
<img class="someclass" src="" />
If content is added dynamically, styles are applied automatically as new content is added to the DOM, you don't need to worry about that. Inject the content you want, and as long as there is CSS-rules that match that content, the browser will handle the rest.
Update
I realize that I might have misunderstood your question at first. If the user is completely in control of the markup of the blog post, I guess the best way would be to use a selector, that select every image within a container that wrap each blog post.
Lets say each blog post is rendered within an element with class post. Then you could do something like this:
.post img {
border: 1px solid #000;
}
I am attempting to add itemprop="image" for a corporation's logo (as shown here: http://www.schema.org/Corporation), but I am using the Gantry Logo plugin from the Gantry framework for Wordpress. As a result, the image is actually loaded by a reference in CSS, and not using the HTML tag.
Unfortunately, it seems that the itemprop="image" can only be added to that tag, as that is where it grabs the URL from.
Can anybody think of a way around this without attempting to hide a logo on the site and place the tag on it?
(The site I am specifically referring to is http://www.bpsresolver.com for reference.)
"Can anybody think of a way around this without attempting to hide a
logo on the site and place the tag on it?"
That's exactly what needs to be done.
The way to do it is to open the source for this Gantry Logo plugin and find the logo's <a id='logo'></a> that the css refers to and change it to <img src='yourimage.jpg'/> I usually use WindowsGrep to find id='logo' or whatever it may be in your case.
But to answer your question: "Is there a way to add microdata to an image referenced in CSS?" - No :)
What I ended up doing to fix it was going to the logo.php plugin located in /plugins/gantry/widgets/. At the bottom of that file is where the <a> tag is that miro mentioned.
Instead of removing it and replacing it (since it had a number of other CSS properties attached that needed to stay the same), I simply added the <img> tag in between the <a> tags, and changed the CSS that referred to the image from background: url(url_to_image); to background: transparent;.
Lastly, I wrapped the whole thing in a <div> tag which I used to indicate the scope, and placed itemprop inside <img>.
Im new to programming..Can anybody help me out please ....
im using an html to display an image later i want to display another html on the first html so i need to set second html as transparent. so the image in the first html looks like a background image....
is it possible...?
Thanks
Well you actually could use an <iframe> containing the second page in a floating <div>-element. But as always, it's not always good just because it exists or because it was technically possible.
Except for the use of frame, you should never have more than one <html> and never more than one <body>
It would be the best to have something like this:
<html>
<head><!-- header goes here --></head>
<body style="background-image: url('first.png');">
<img src="second.png"/>
</body>
</html>
Sure you could extract the css-part into a css-file. And you could set the style-attribute for another tag as well, it doesn't forcibly has to be <body>
hope that helps a bit.
You can't. But if you just want a background image, you can accomplish this by using CSS and the background-image. See: http://www.w3schools.com/css/css_background.asp
With a scripting/programming language you can.
In ASP.NET you can read the contents of an html file and put it inside your current page.
It doesn't sound like iframe is what you are looking for. Perhaps the use of the words "on" and "transparent" are throwing me off. It sounds like you want to have two HTML pages, with the content from one appearing in front of the other but transparent? In that case I think CSS z-index might help you:
https://developer.mozilla.org/en/Understanding_CSS_z-index/Stacking_context_example_1