I have problem with changeing bootstrap 3 background image, as a background of .container i use image, id like to set some other image as background image so it will fill empty space's on sides.
Can i kindly ask for some help ?
Link to site
Attach the image to the body element instead of an element with the class container using css.
body {
background: url('x');
}
x can equal an absolute image path or a relative path.
this can also be implemented using inline styling directly on the body element in your html
<body style="background:url('x')">
Related
I am trying to use a image to set the background but when I put in my code I end up with multiply images instead of one whole image, I can't post a picture but here is the code i used in the CSS:
body { background-image:url(../images/kw4.jpeg);}
Am not sure what I am doing wrong?
If you mean multiple copies of the same image all over the page, then that is not actually a bug. When you specify a background image in CSS, your browser will automatically fill the page by tiling the same image over and over.
To prevent this from happening, add
background-repeat: no-repeat; to your CSS. This will render the image only once.
Try:
body { background:url(../images/kw4.jpeg) no-repeat;}
I am making a webpage with an image at center and i wanted a password field(textbox on the image) like this.
I used Some CSS3 animations in the image so is there's any way that i could place my text box on the image without affecting any css animation??
As he said in the comment sample code would be nice, however you could try using absolute position in your css for the image this will allow overlapping, I cannot give any specific code but it will be similar to what is below.
{
position:absolute;
}
in the above case use :
position:absolute
what it does is simply disassociates the elements from is siblings and can be placed anywhere holding a reference to its parents.
Means if you want to position the element , use left/right of its parent.
I need the ability for all images, placed in a post, to be wrapped in a div so I can add custom styling to the image. (I need a image border on each image.)
How can I get get it so that it automatically adds a div around each image in the post content?
Thanks
Instead of surrounding each image with a div, why don't you just apply a class to each <img> tag?
So, you could add, in your CSS file:
img .border
{
/* your border code here */
}
And for every image in your HTML, just add class="border".
I would also recommend looking into some CSS3 - border-image may offer the solution: http://css-tricks.com/understanding-border-image/
I have seen a website using google chrome that they put the CSS Background Property in the HTML tag like this:
html { background: #eee url('../img/bg.jpg') center center repeat fixed; }
Is it ok to do that or should i put it in the body?
It doesn't really matter on which you put the background, both work equally good, but there is a gotcha.
If you put the background on BODY only, the background will stretch the whole height of the screen, even if there's no content on the page, but if you put it on both HTML and BODY, the background on BODY will only be as high as your content inside it, just like on any DIV.
I often use backgrounds on both when there's a need for two background images as this eliminates the need for unnecessary DIV wrappers.
lea.verou.me puts it on the html tag. If it's good enough for her, then it's good enough for you. ;)
You might want to throw height: 100%; in there too.
I would suggest putting a page wide background image on the body tag.
<body>
And in your style sheet you can then specify a background
body
{
background-image:url('blah.jpg');
}
Can we use more than 2 images for single navigation. That means when we hover on that image it will shows 6 different images. Is it possible to make for a single navigation image? If possible means how?
I think you are all understand this
alt text http://img714.imageshack.us/img714/2786/mubeen.gif
If I understood you correctly, you want to continously change the position of your background image while you hover over one button.
If that's right, then I suggest making a static image as background image and changing the image to a GIF animated image on hover
You can (at the moment - cross browser) only set one bg image on an element. If you want to change it on hover or whatever, just add an a-tag with href set on #:
<a class="img" id="thatoneimg" href="#"></a>
And then in the css:
a.img {
width: 100px;
height: 100px;
}
a#thatoneimg {
backround-image: url(staticimg.jpg);
}
a#thatoneimg:hover {
backround-image: url(movingimg.gif);
}
That should work cross browser. You need the a-tag for it to work in IE.
Edit:
As Starx said, just make the second image a .gif with an animation. It will not use sprites but it will work.
If I get your question right, it's possible, but you will have to have 6 different HTML elements to contain the background image at 6 different positions.