I've noticed that most of the websites now "somehow" disable viewing some of the images used in their template, so I'd like to obtain this same result:
I thought instead of using the tag <a>with <img>, I put a div and set the "background" property as an image yet it's still viewable in the browser!!
Any ideas?
This is not disabling the images, this is done by using images as backgrounds in CSS and not as a normal img tag like:<img src="your-image.jpg" />. Here's an example how this is done:
HTML
<div class="randomClass"></div>
And the CSS goes like this:
.randomClass {
background-image: url('http://i.ytimg.com/vi/1WmaBpkGjXk/mqdefault.jpg');
background-color: #cccccc;
width:350px;
height: 180px;
}
On the Jsfiddle link I provided above if you right click on the 1st image you have the option to open the image on a new page or the option to download it. On the second one you don't have this options by right clicking on it, but still these images can be downloaded in other ways.
Related
I am using Redactor v10.0.9 to allow users to create some custom posts for my web app. These posts are rendered in an iframe in a modal, and I need images that are uploaded to have a max-width of 100%. I have tried to maintain an outside stylesheet that I append to the iFrame that contains
img {
max-width: 100% !important; } }
But that doesn't seem to be working at all. I would like to just add style="max-width: 100%" inline style to the img tag when it's inserted, but I can't seem to find where the image is inserted into the post after an image upload.
Any ideas on how to force these images in an iFrame to be max-width: 100%? Thanks
Edit 1:
I am using the imagemanager plugin to upload images to Redactor. Forgot to mention that.
Edit 2:
The content contained in the iFrame is dynamically created HTML, not content from another domain.
Figured out how to do this!
Instead of appending any sort of style to the img tag on insertion, when I render the custom posts I am retrieving all of the images in the iFrame in JavaScript, and then applying a CSS attr of "max-width: 100%" on each one.
I am trying to set my site's background image to a local img through CSS. But the code will not let me use a local image, but a non-local internet image is fine. Why is that?
Code:
html {
/* background-image: url("chrome://global/skin/media/imagedoc-darknoise.png"); */
background-image: url("img/diamondPlate_bg.jpg");
}
The bottom image is the one that should show, but it doesn't. but the top image does work. Why?
You have to provide the full image path, as the browser can't determine where to search for.
According to your CSS file path, I will suppose it is at the img directory with your HTML page, you have to change the url as follows:
body {
background: url("../img/diamondPlate_bg.jpg") repeat 0 0;
}
This is like going back one folder and entering the img folder to fetch images.
When I do inspect element on my wordpress page on the left of my screen I have this code,
<header class="main-header" role="banner">
on the right of my screen I have this code
background-image: url('http://chuaquanam.ca/wordpress/wp-content/uploads/2013/08/cropped-TopMenu11.jpg');
Can someone help me in what *.css file the background-image code is located? I looked at all css files like style.css but I could not find it.
Inspecting the header element shows that the CSS for header.main-header is inline. This means, it is generated by WP and embedded into the page, not into a CSS file. Once generated, you can see the code by viewing the source of your blog page:
<style type="text/css">
header.main-header
{
background-image: url('http://chuaquanam.ca/wordpress/wp-content/uploads/2013/08/cropped-TopMenu11.jpg');
width: 980px;
height: 200px;
}
.. which is on line 67 onwards.
The way for you to change your background-image is via the WP menu, if you select Appearance > Header, you can upload a new image, which will populate the width and height based on the image you upload.
If you want to edit styling other than these properties (like positioning, floating, etc.,) you can find the other header.main-header styling in style.css, line 253 onwards.
I'm working with a project where I need to have a scrollable div element display the bottom when the page loads. This means that the user could scroll upward to see the rest of the content. The only way I could think of doing this would be to have the div autoscroll to the bottom on page load. But since load time is important for this project, I'd like to find another solution. Is there any other way to do this, preferably in something like css? Thanks!
You can use javascript to get this effect. It's fast, so you won't have to worry about load times:
var yourDiv = document.getElementById('yourDivId');
yourDiv.scrollTop = yourDiv.scrollHeight;
There are also numerous ways to implement this using jQuery. Here's a great blog post on the subject:
jQuery Scroll To
I'm not sure to understand well what you need, but maybe something like that:
#bottomDiv{
position:fixed;
bottom:0;
}
There is no javascript tag so what about hide element until css file is not downloaded (but this work only for 1st time, then will be css file cached)
<div id="bottom" style="display: none;"></div>
CSS
#bottom {
display: block !important;
position: fixed;
bottom: 0;
}
I have a background image set on a web page with the following CSS:
body, html
{
background-image: url(Content/Images/bg-lounge-2-l.jpg);
background-repeat: repeat;
background-attachment: fixed; /*background-position: 0 -390px;*/
}
This background was visible until late last night, in Firefox and IE, but at some point something changed and it no longer shows in the browsers. It does show in the VS 2008 designer, and the image is in the correct location. If I paste the image url into my address bar, I can view the image. What could be wrong?
Remember that the url to the image is relative to the path to the CSS file, and not the HTML file that loads the CSS file. Also check that you have the correct spelling and capitalization.