I am setting up adsense for my website at the moment and am trying to set a background-image behind the ad so that if someone visits the page with ad-block there is a image politely asking them to turn it on if they would like to support the website. Currently, I have wrapped the adsense code in a div and set a background-image on it, however when I do that my adblock software is able to detect it and block the image behind it. Would anyone be able to tell me the correct to do this? Cheers
HTML -
<div class="ad-alert">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Listings Banner -->
<ins class="adsbygoogle" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-9407013200292589" data-ad-slot="7535806952"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
</div>
CSS -
.ad-alert {
width: 728px;
height: 90px;
background-image: url("../images/ad-alert-banner.png");
}
Okay, solved it myself. The trick was to set the div background color through the CSS and then set a background-image which has the text you want with a transparent background. Below is an example.
CSS -
.ad-alert {
width: 728px;
height: 90px;
background: #cccccc;
background-image: url("../images/randompeople.png");
margin: auto;
margin-top: 30px;
}
Related
I am trying to place a background image to a tag, when I set the image link in background-image:url it is not showing me the image as background. This is my code, what could I be doing wrong?
<a
href="#"
data-toggle="lightbox"
title="Instagram"
style="
width: 400px;
height: 400px;
background-image: url('https://scontent-atl3-2.cdninstagram.com/v/t51.2885-15/275180538_484682353010222_2402478995051705385_n.jpg?stp=dst-jpg_e35_s640x640_sh0.08&_nc_ht=scontent-atl3-2.cdninstagram.com&_nc_cat=102&_nc_ohc=fTObVsU65g8AX8x2Wuy&edm=ABfd0MgBAAAA&ccb=7-4&oh=00_AT-oNSMzXpDYHz0_nSlywYBoscNl37e8kWF8dEe3-4zxWA&oe=625818CB&_nc_sid=7bff83') !important;
"
>
<div class="photo-box-content">
<span>Instagram223424</span>
</div>
</a>
I Assume you are trying to load image from instagram or facebook content because of the URL. It is not allowed to be load like that, try saving the image locally that's the quickest solution.
I will only recommend you to assign the background image locally. First, download the image and then, add it to your code main file. The main problem while you import the url is, if the image of the url is deleted by any reasons, your webpage will not display the image anymore. So, you should download it and then add it to your code main file. Then, rename the picture to a short name (recommended). Then you should code like this 👇
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.body {
width: 100%;
height: 100vh;
/*locally from the device*/
background: url('example.jpg');
/*to adjust the image perfectly according to the device*/
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
<body>
<div class="main">
<div class="body">
<h2>This is a heading</h2>
</div>
</div>
</body>
This is the method which I was following for the past few months. Hope it will help you ☺.
I found the same reference with this question, here's the link:
Visit instagram style explore page image list with CSS
I'm working on adding some icons to my company's website, but I'm having trouble getting them to link to a page.
I'm using an image sprite and CSS to change the image on hover. If you click here and look under Services We Offer you can see the image hover.
I'm using a div to do this, with this code:
<div class="video-box"></div>
And in my CSS:
.video-box {
width: 184px;
height: 222px;
background: url("http://bluestarmultimedia.tv/wp-content/uploads/2015/01/rollover-video-2.png") no-repeat scroll left top transparent;
display: block;
}
.video-box:hover {background-position: -184px 0px;}
When I add a link like this, it doesn't work.
<div class="video-box"></div>
How can I get the images to link and keep the roll over?
These are some of the scripts that the website use. I think you will need to import the required JQuery scripts that are used in this website.
<script type='text/javascript' src='http://bluestarmultimedia.tv/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>
<script type='text/javascript' src='http://bluestarmultimedia.tv/wp-content/plugins/revslider/rs-plugin/js/jquery.themepunch.tools.min.js?ver=4.6.5'></script>
<script type='text/javascript' src='http://bluestarmultimedia.tv/wp-content/plugins/revslider/rs-plugin/js/jquery.themepunch.revolution.min.js?ver=4.6.5'></script>
<script type='text/javascript' src='http://bluestarmultimedia.tv/wp-content/themes/x/framework/js/dist/site/x-head.min.js'></script>
<script type='text/javascript' src='http://bluestarmultimedia.tv/wp-content/plugins/x-shortcodes/js/dist/site/x-shortcodes-head.min.js'></script>
Just test your code in Fiddle and it worked fine, maybe you need to specify more about what you really face with.
Or you could make div with link function by using span and z-index.
HTML
<div class="video-box">
<span></span>
</div>
more CSS
.video-box span {
position:absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1;
}
I think there is no problem with your code.It is working as you want.With This
<div class="video-box"></div>
And this
<div class="video-box"></div>
Here is JSFIDDLE
I would like to know why images are not displaying after adding
.image_container img {
background: url(http://domainname.com/something_something_2014_something/something_something_1320_something/something_something.jpg);
width: 900px;
height: 500px;
cursor: pointer;
}
in inline CSS. This little set of rules is supposed to style
<div class="image_container">
<img>
</div> <!-- end image_container -->
The image is not showing up but when I delete the
background: url()
and add
src=""
to an
<img>
tag then the image is displaying properly.
Can someone explain to me this phenomenon ? I thought that it looks pretty logic, I set up an element inside a div - and set up definitions of this element in section that is more appropriate for it - inline CSS.
I've double checked if CSS is placed properly inside
<head>
tags as well as double checked the directory where image is being placed.
You can not add an background to an img tag.
(in fact you can but the background-image will show up behind your image in the src-Tag. You can use this for special effects if you have a semi transparent image)
Solution
Try to add the background to your div instead: http://jsfiddle.net/aoy95s75/
HTML:
<div class="image_container">
<img src="">
</div> <!-- end image_container -->
CSS:
.image_container {
background-image: url(http://www.imag.de/images/10_welt_startseite.png);
width: 900px;
height: 500px;
cursor: pointer;
display: block;
}
In this case you can drop your <img>-Tag and just write
<div class="image_container"></div> <!-- end image_container -->
Use another div instead of img tag and change your css accordingly (.img-container .img) :
<div class="image_container">
<div class="img"></div>
</div> <!-- end image_container -->
I think you miss coma ,
replace your css with this
.image_container img {
background: url('http://domainname.com/something_something_2014_something/something_something_1320_something/something_something.jpg');
width: 900px;
height: 500px;
cursor: pointer;
}
for reference checkout this Link
hope this help..
For all poor souls still trying to understand this phenomenon - type :
display : block;
and magically the image appears :)
However, please follow a simple rule that I've learnt upon researching internet - HTML is for content, CSS is for styling it. Never the other way.
I am writing a jquery mobile app which needs a map.
For the map I am planning to use Google maps service.
To account for orientation changes, I tried to use something like:
<script>
$('#page-map').live('pagecreate', function(event) {
var map = $('#map_canvas').gmap({
...
});
...
$(window).resize(function() {
$('#map_canvas').width($(window).width());
$('#map_canvas').height($(window).height());
});
)};
</script>
The problem: this code correctly resizes the map canvas when the device is rotated, but it looks like jquery mobile resize() is skipped (the url bar is visible, for example...).
Not even adding to the "resize(function() {" code something like this:
google.maps.event.trigger(map, 'resize');
is of any help.
UPDATE:
The issue only happens on the only mobile device I'm testing my pages - a Samsung Galaxy Mini (GT-S5570), Android 2.3.4 (Gingerbread). It does not happen when resizing window on a desktop PC (i.e: on a desktop browser map_canvas is correctly filled when browser's window is enlarged, even without the resize() binding, only due to width/height at 100% on map_canvas...)
I assign a size through css to my map in jquery mobile
I add the map_canvas inside div with dimencion deuin want in this case 100%
CSS
#map_content {
padding: 0px;
width: 100%;
height: 100%;
overflow: hidden;}
#map_canvas {
width: 100%;
height: 100%;
padding: 0;
text-shadow: none;}
HTML
<div data-role="content" id="map_content" data-theme="a">
<div id="map_content">
<div id="map_canvas"></div>
</div>
</div>
I've tried the above answer (plus many others) and nothing worked for me. Actually, the above code was working for me, but just until I started using jQuery Mobile. Somehow, when I load jQuery Mobile (funnily enough, I noticed that it's the JS, no the CSS) the map_canvas has no height (a trick to check the height of the element is adding a border to it like border: 1px solid red;).
Eventually, I managed to solve the auto-resize when the orientation changes by using the following code/css:
<div data-role="page" id="pageID">
<div role="main" class="ui-content">
<div id="map_canvas">
</div>
</div>
</div>
And in the css:
html,
body,
#pageID {
height: 100%;
margin: 0;
padding: 0;
}
.ui-content {
padding: 0;
}
.ui-content,
.ui-content #map_canvas {
height: inherit; /* the trick */
}
So, basically the: height: inherit; solved the problem for me.
Credits: https://jqmtricks.wordpress.com/2014/12/01/content-div-height-css-solution/comment-page-1/#comment-250
I hope it helps!
I want to fix the size of empty image to 150px. On Firefox, I can use float: left, but it doesn't work on Google Chrome.
HTML:
<div>
<img src='some broken url' alt='no image'>
<br>
<img src='http://farm7.staticflickr.com/6063/6046604665_da6933bd10.jpg'>
</div>
CSS:
div {
width: 450px;
height: 500px;
background: cyan;
}
img {
display: block;
max-width: 100%;
min-height: 150px;
min-width: 150px;
background: grey;
}
Is there a CSS solution for this?
I think there is some misunderstanding. The srcs are supposed to be random urls that I wouldn't know in advanced.
Ideally, use an empty placeholder <div> for this:
<div>
<div><!----></div>
<br>
<img src='http://farm7.staticflickr.com/6063/6046604665_da6933bd10.jpg'>
</div>
... and give it the dimensions you need. This will allow you to do stuff like show a background placeholder image in its place etc.
If you want to style an empty image-tag:
img[src=""] { width: 150px; }
Should work, expect for IE6.
If you want to get it cross browser compatible, the solution from #Tom would be your best choice.
Or jQuery solution (because CSS can't check for broken URLs):
$('img').error(function(){
$(this).css('width', '150px');
});