I'm trying to place a background image on this bootstrap site: http://rsatestamls.kaliocommerce.com/
But what happens, is that the background is behind everything. What I mean by that, is that there's some content I want to be -over- the background, but instead the background is everywhere. I'd just like for it to be on the sides and behind everything, not on top of everything.
This is what it looks like if I try using it: http://i.imgur.com/32cG2bw.jpg
This is why I'm using Bootstrap...I'm not great at design by any means. More of a Developer than a Designer.
So anyways, any ideas on how I can accomplish this? I'm looking for a similar affect to this background: gardeners.com
Just because I don't want to have a ton of whitespace.
What I've tried to do is add:
background:url("/images/art/AMLRWDBackground.jpg");
To the CSS, but that looks terrible. Any ideas? I'm not even sure where to start.
Thank you.
The way to do this would be to have all of your content in one frame with a css value of:
#frame {
background-color: #fff;
}
Once you have done this add the background to the body and it will work how you intend it to.
Related
I am a beginner in Javascript and I wonder if you can help me with this issue:
I am working on a webpage developed another programmer. the page has a lot of functionalities (buttons..etc)
I am trying to add a grid on top of all the page so that the buttons will still be clicable.
I made a png grid and put at the beginning of the body in the html file. The problem is that I cannot clic the button anymore under the image, even if the image is transparent. I also tried with table grid but same issue.
I saw that I might need to check the z-index, but before going this way I wonder if there is an alternative way. If z-index is the only way, will I have to check all the other buttons (there are a lot) and set a z-index to them as well?
best regards
Guido
I could be completely misunderstanding your issue because you haven't provided much useful information, but it sounds like you want a grid for visual purposes only?
If that's the case, you could try wrapping the contents that you want on top of the grid in a single div, and setting the background as the grid png you mentioned.
<div class="bg">
<button></button>
<button></button>
</div>
.bg {
background-image: url("grid.png");
}
I was wondering how I can have different sections of a website fill the entire window.
For instance on this website by Viraj Bindra.
In his experience sections, they take up the whole window. I do not know what to call it, is there a word for it? I was also wondering how he has an assist pull so it can perfectly fill the window?
I am sorry if this question is ambiguous. If you go to his website I think it will make more sense.
I'm not seeing the behavior that you're referring to, but I would not use JavaScript, as CSS can do this with better performance. Plus, it's always a good idea to keep styling with styling whenever possible. Anyway, a simple solution would be to set the container element to full-height using vh units. Like so:
.fullheight-container {
height: 100vh;
}
Easy as that, without any complications / after-load jumpiness from JavaScript.
So I'm using Chrome and I really like their 'cursor: wait' style. I doubt this is possible but would it be possible to use as a background-image in a div, not on hover or where my mouse is? Or Is my only option to find the file and place it locally? The file seems like its a different file format so that would kinda complicates things.
It looks like it's using the OS animation (I get a Windows-looking spinner)
I dont know if its easily extracted from somewhere, but you can find something similar you can use however you wish from http://preloaders.net/
That's not chrome's cursor. It depends how are your mouse cursors set in windows. cursor: wait is simply telling browser which cursor should be showed when hovering over that element. Mine looks like this:
To use similar thing for background you would need a picture (can be a gif or you can animate it with CSS) and simple css.
.cursor-wait:hover {
background-image: url("image.png");
}
Hey lovely StackOverflow Community.
I have a problem with my website. I added the Bootstrap Carousel from getbootrap.com and it actually works very well. But there is one problem. Everytime the image sitch, my whole website goes up and down.
I don't know what could be the problem, cause i changed nothing on the code from getbootstrap.com :-/
Sorry for my bad english :D Hope you can understand my problem.
Overwrite the Bootstrap class. This will solve your problem
.carousel-inner>.item {
width: 100%;
}
My issue with the Carousel was not directly related to the image, but rather the content within it that was causing the shifting of the page. To avoid it while being elsewhere on the page, I just used JQuery to detect if I had scrolled past my carousel and to make it pause. I know its a workaround but its effective.
$(document).on("scroll",function(){
if($(document).scrollTop()>200){
$('#slider').carousel('pause');
} else{
$('#slider').carousel('cycle');
}});
It is because it changes some class on the carousel items.
You can set a min-height to the carousel container (.carousel-inner) and it won't jump anymore.
Set the value that fits better your needs.
ALSO:
Seam like there is a little effect on the images, so that every time that an image change, it became a bit smaller. If you just want to avoid the all website jump, use what i said above, if you want to change the "change-of-size" behave, you need to check the class .next and (probably) .right/.left and see if there's a change of height. It is hard to inspect them from a live website, that why i'm telling you to check this from the code - Or upload the code if you prefer.
building a mobile site using bootstrap 3 which makes use of the collapse js plugin.
My issue is that when you hover over the font in the collapse (it's worth noting that this happens with system fonts and is not just a web-font issue, it's just easier to show with a webfont) or click the font it changes in appearance. Parts of the font are removed or the size changes. I'm not sure why this is happening and I've tried the following:
-webkit-font-smoothing
text-rendering
adding a fixed line height
backface-visiblity
However, none of those work. I'm running out of ideas and while it's harder to show in a screenshot it is 100% a big and noticeable issue when interacting with the site.
I'm assuming it's something to do with the collapse jquery but I can't find anything in the bootstrap repo, on here or from a general google search (hard thing to search for haha) so any help would be appreciated. I don't have much code related to the fonts but:
.panel-tap {
position: relative;
display: block;
width: 100%;
line-height: 1;
font-size: 16px;
}
The panel has some padding but this isn't altered during the animation, nor are any styles added during the animation (only class names are added to display/hide the content below.
I can't post a link to the site but hopefully this is enough info.
Thanks
edit: Worth noting that I've tried removing all styles associated with it (i.e position) and tried adding specific styles to make sure it isn't being overridden across the site (i.e adding font-weights, line-heights, borders etc)
edit2: This doesn't happen all the time, it stops after a few seconds or a few clicks, it's totally inconsistent
edit3: Disabled the animation/jquery side of collapse and it still does it
Some Ideas:
Have you tried setting all the CSS annimation properties to 0/none. It might be picking something up from a parent/bad selector elsewhere.
Double checked there is no CSS for :active or :focus. Or maybe a span around the text that has a relative font-size ( em, % etc)
I remember having trouble with something similar and position:relative;. Can you wrap a span around the text and give it position:static;
Is there an active class or something that might be causing the issue?
Thats all I can think of at the mo. But might help.