I'm trying to repeat-y an image that's in a div and no background image but haven't figured how. Could you please point me to a solution?
My code looks like this:
<div id="rightflower">
<img src="/image/layout/lotus-dreapta.png" style="repeat-y; width: 200px;"/>
</div>
You have use repeat-y as style="background-repeat:repeat-y;width: 200px;" instead of style="repeat-y".
Try this inside the image tag or you can use the below css for the div
.div_backgrndimg
{
background-repeat: repeat-y;
background-image: url("/image/layout/lotus-dreapta.png");
width:200px;
}
Not with CSS you can't. You need to use JS. A quick example copying the img to the background:
var $el = document.getElementById( 'rightflower' )
, $img = $el.getElementsByTagName( 'img' )[0]
, src = $img.src
$el.innerHTML = "";
$el.style.background = "url( " + src + " ) repeat-y;"
Or you can actually repeat the image, but how many times?
var $el = document.getElementById( 'rightflower' )
, str = ""
, imgHTML = $el.innerHTML
, i, i2;
for( i=0,i2=10; i<i2; i++ ){
str += imgHTML;
}
$el.innerHTML = str;
(DEMO)
Codes:
.backimage {
width:99%;
height:98%;
position:absolute;
background:transparent url("http://upload.wikimedia.org/wikipedia/commons/4/41/Brickwall_texture.jpg")
repeat scroll 0% 0%;
}
and
<div>
<div class="backimage"></div>
YOUR OTHER CONTENTTT
</div>
It would probably be easier to just fake it by using a div. Just make sure you set the height if its empty so that it can actually appear. Say for instance you want it to be 50px tall set the div height to 50px.
<div id="rightflower">
<div id="divImg"></div>
</div>
And in your style sheet just add the background and its properties, height and width, and what ever positioning you had in mind.
Related
Longshot... I don't think this is possible but I've been shocked before!
I anchor tags, all of which have background images, all 300px wide but their heights all vary. Is there anyway to set these without actually having to type out the height? Sort of setting it to the bg url's dimensions?
Thanks!
I don't think people understand - My fault for rushing the question.
Here's code as an example:
#ex-1 {width: 300px; height: 410px; background: url('/image-1.jpg');}
#ex-2 {width: 300px; height: 420px; background: url('/image-2.jpg');}
#ex-3 {width: 300px; height: 430px; background: url('/image-3.jpg');}
#ex-4 {width: 300px; height: 440px; background: url('/image-3.jpg');}
I'd like to NOT set the height, and it set automatically using CSS only. I don't want to use image tags.
I wasn't sure if this was possible, I assume not.
Thanks
A simple way of doing this is to add an image like this and then make it hidden i used visibility:hidden http://jsfiddle.net/gztpsfkw/1/
i just saw that you don't want to use <img> tags but as for here the image is being hidden and it takes up the space.
<img src="http://placekitten.com/300/301" />aa
And apply the css
a{
display:block;
background-image:url('http://placekitten.com/300/301');
width:100px;
height:auto;
}
img{
visibility:hidden;
}
We can use a visibility: hidden way:
<img src="http://lorempixel.com/100/200/" />
CSS
a {background: url("http://lorempixel.com/100/200/") center center no-repeat; width: 100px;}
a img {visibility: hidden;}
Fiddle: http://jsfiddle.net/praveenscience/vhjxfgtw/
JavaScript Solution
Procedure
To set the height, dynamically, you need to use JavaScript. So, you can get the computed value by adding a <img /> tag and computing the value by setting the src. The pseudo code would have been like this:
Get the computed value of background-image.
Attach it to a new <img /> element in the DOM.
Get the height of the new <img /> element.
Set the height of the fake background <div>.
JavaScript
$(document).ready(function () {
bg = $(".bg").css("background-image");
$("body").append('<img id="faux" src="' + bg.substring(4, bg.length-1) + '" />');
height = $("#faux").outerHeight();
$("#faux").remove();
$(".bg").height(height);
});
Fiddle: http://jsfiddle.net/praveenscience/rcL3xj0x/
If you don't want to use inline CSS, you can use this:
$("style").append('.bg {height: ' + height + 'px}');
If you're looking for a way to make the background images fill all the space available then use background-size: cover
I think you're looking for something like this:
function setBackgroundImage(element, src) {
var img = new Image();
img.onload = function() {
element.style.height = img.height+'px';
element.style.backgroundImage = 'url('+img.src+')';
}
img.src = src;
}
Or, if you need to scale the images for the width:
function setImage(element, src) {
var img = new Image();
img.onload = function() {
var sizeRatio = element.offsetWidth / img.width;
element.style.height = (sizeRatio * img.height)+'px';
element.style.backgroundImage = 'url('+img.src+')';
element.style.backgroundSize = 'cover';
}
img.src = src;
}
Side Note: The <a> tag is not a block level element. In order for the <a> to have a height and a width you need to make it a block level element to show the background image.
You would use: display: block
Now for your question... In order to get the background image, with out having to manual type it in you can use a little jQUery to make your life a lot easier. I have modified your CSS and HTML a little bit to accomodate the jQuery.
CodePen Example
#links { overflow: hidden; }
#links a { display: block; float: left; width: 300px; height: 200px;
/* generic height set in case there is no background image */ }
#ex-1 { background: url('http://www.google.com/images/srpr/logo11w.png');}
#ex-2 { background: url('http://www.bing.com/s/a/hpc12.png');}
#ex-3 { background: url('http://www.google.com/images/srpr/logo11w.png');}
#ex-4 { background: url('http://www.bing.com/s/a/hpc12.png');}
<div id="links">
</div>
Here is the jquery. It will loop through all your images and set the height according to your background image
$(document).ready(function(){
$('#links a').each(function(){
var temp = $(this).css('background-image');
temp = temp.replace('url("', '').replace('")', '');
var newImg = new Image();
newImg.src = temp;
imageHeight = newImg.height;
imageWidth = newImg.width;
$(this).css('height', imageHeight);
});
});
I keep seeing websites with a background image that subtly moves when you scroll down. This is a really nice effect but I'm not sure how to do this? I'm am experienced with html, css and jquery but this is something I haven't done before!
I have a simple jsfiddle below but I need some help please!
Many thanks,
http://jsfiddle.net/def2y2yt/
Code snippet - more available using the jsfiddle link
.background {
background-image: url(example.pjg);
background-repeat: no-repeat;
height: 600px;
width: 100%;
}
Like TylerH said, it's called Parallax. You can see an example here.
Using JavaScript:
var velocity = 0.5;
function update(){
var pos = $(window).scrollTop();
$('.container').each(function() {
var $element = $(this);
// subtract some from the height b/c of the padding
var height = $element.height()-18;
$(this).css('backgroundPosition', '50% ' + Math.round((height - pos) * velocity) + 'px');
});
};
$(window).bind('scroll', update);
Or you could use this simple CSS property which I made a blog post about:
http://nathanpeixoto.fr/blog/article8/web-un-one-page-presque-sans-javascript
(French only, sorry).
Let's say this is your HTML:
<div class="background_container">
</div>
<style>
.background_container{
background-image: url("XXX");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed; /* <= This one */
}
</style>
The best library for that is Stellarjs
Take a look at the example here
http://markdalgleish.com/projects/stellar.js/demos/backgrounds.html
I have tried many different techniques in order to vertically align a div to the bottom of another div, does anybody have any idea as to how I could do this? I have tried a lot of things, but nothing seems to be working! :(
<div class="containerBlog">
<div class="infoBlog">
</div>
</div>
The inner div is a cricle in my code.
CSS:
.containerBlog { position:relative; }
.infoBlog { position:absolute; }
JS:
var container = document.querySelector(".containerBlog");
var info = document.querySelector(".infoBlog");
var cHeight = container.offsetHeight;
var iHeight = info.offsetHeight;
var top = cHeight / 2 - iHeight / 2;
info.setAttribute("style", "top:" + top + "px");
Try something like that?
Wait, I totally misunderstood your question. you simply want to position the div to the bottom of the parent?
Simply absolutely position it so.
CSS:
.containerBlog { position:relative; }
.infoBlog { position:absolute; bottom:0; }
You could use the display table and vertical align technique in your css
.containerBlog {
display:table;
vertical-align:middle;
}
.infoBlog {display:table-cell;}
I don't know if I'm clear enough let me know if this helped you
I have some URLs to which I want to add the same image. I've got the following code:
a.linkArrow
{
background: transparent url('../images/abc.png') no-repeat center right;
padding-right: 60px;
}
And a link example:
<a class="inkArrow" href="#abc">Abc?</a>
The problem is, the image appears on the left of the text of the link. I want that the image appears always on the right side of the text AND that the distance from the start position of the link text to the start position of the image is always the same. So when I have multiple links in a row that the images of the links align. The image should be clickable and lead to the same url as the link (I'm not sure if it is possible to enclose it in the same tag for this approach.
Any ideas?
it is "right center" not "center right" see example: http://jsfiddle.net/bingjie2680/ZtLCA/
it also works when you want them to be same distance between text link and image see example: http://jsfiddle.net/bingjie2680/ZtLCA/1/
You could do this with jQuery too.
Some Link
$('.imageLink').each(function(){
$(this).append(' <img src="YOUR IMAGE HERE">');
});
http://jsfiddle.net/jasongennaro/6Nc3n/
EDIT:
I realized that the OP also said the distance from the start position of the link text to the start position of the image is always the same
So I modified the code
var finalWidth = 0;
var getWidth;
$('.imageLink').each(function(){
getWidth = $(this).width();
if(getWidth > finalWidth){
finalWidth = getWidth;
}
});
finalWidth +=15;
$('.imageLink').each(function(){
var getText = $(this).text();
$(this).html('<span style="display:inline-block; width:' + finalWidth + 'px;">' + getText + '</span>');
$(this).append(' <img src="http://icdn.pro/images/en/l/e/left-arrow-icone-3702-32.png">');
$(this).css('textDecoration','none');
});
What this does is get the width of each link text. If checks if that width is the longest, if not ignores, but if yes, then makes it the finalWidth. This finalWidth then added to a new span created around the text and styled with inlineblock.
Updated Fiddle
http://jsfiddle.net/jasongennaro/6Nc3n/2/
a.linkArrow
{
background: transparent url('../images/abc.png') no-repeat center right;
display:block;
width: /* image width PLUS the distance you want from the text px */;
height: /* image height px */;
}
What you need to do is give them a fixed width and a display: block.
Your css would look like this:
a.linkArrow
{
background: transparent url('../images/abc.png') no-repeat right center;
display: block;
width: 100px;
}
Is there any way to set a fixed/custom height for ligtbox2?
#lightbox img{ width: auto; height: 600px;}
This only resizes the img and not the outer container.
With that declaration you are styling the img within #lightbox
Try removing the img so that you are only styling #lightbox
does this work?
#lightbox { width: auto; height: 600px;}
If you go through the HTML it creates you can see that it's wrapped in a div with id="lightbox" and within that a div with id="outerImageContainer". The latter has a style attribute with the height of the image. Try targeting that. Either overwriting it in your CSS or changing the height after it's loaded.
<html>
<head>
<style type="text/css">
#lightbox { border : solid 2px #000000; position:absolute; }
#lightbox img { width:auto; height: 600px;}
</style>
</head>
<body>
<div id="lightbox">
<img src="Desert.jpg" alt="desert" />
</div>
</body>
</html>
None of these solutions worked, but thanks for your help guys. I had to get my hands dirty in the js... here's my hacked code:
lightbox.js
...
// once image is preloaded, resize image container
imgPreloader.onload = (function(){
var scale = 600 / imgPreloader.height; //modified
this.lightboxImage.src = this.imageArray[this.activeImage][0];
this.resizeImageContainer((imgPreloader.width * scale), //modified imgPreloader.height);
}).bind(this);
imgPreloader.src = this.imageArray[this.activeImage][0];
},
//
// resizeImageContainer()
//
resizeImageContainer: function(imgWidth, imgHeight) {
// get current width and height
var widthCurrent = this.outerImageContainer.getWidth();
var heightCurrent = this.outerImageContainer.getHeight();
// get new width and height
var widthNew = (imgWidth + LightboxOptions.borderSize * 2);
var heightNew = (600 + LightboxOptions.borderSize * 2); //modified
...