as an excercise i decided to delve in to css layout styling and am already failing to see why my layout is not aligning correctly. also why is the container div only appearing when there some text in there. i thought it would display and grow based on the background property in css statement. i have done screengrab to show problem. can someone show my error. thanks
screen grab: http://imageshack.us/photo/my-images/21/containergrabnew.png/
css
#container {
width: 800px;
margin: 0 auto;
background-image: url(../images/container-bg.gif);
background-position: center center;
background-repeat: repeat-y;
}
#containerLeft {
width: 475px;
float:left;
background-image: url(../images/container-left-bg.gif);
background-position: center center;
background-repeat: repeat-y;
}
#containerRight {
width: 300px;
float:right;
background-image: url(../images/container-right-bg.gif);
background-position: center center;
background-repeat: repeat-y;
}
html
<div id="container">
This is the container
<div id="containerLeft">
This is the left container
<div id="containerRight">
This is the right container
</div></div>
</div>
am already failing to see why my
layout is not aligning correctly
Your HTML is not nested correctly. Change it to this:
<div id="container">
<div id="containerLeft">
This is the left container
</div>
<div id="containerRight">
This is the right container
</div>
</div>
also why is the container div only
appearing when there some text in
there. i thought it would display and
grow based on the background property
in css statement.
You need to clear your floated elements.
You can do this by adding overflow: hidden to #container.
You should read this article for more information: http://css-tricks.com/all-about-floats/
It discusses why this happens, various ways to fix it, and includes useful and relevant information about floats in general.
Related
So when I try to define the background-image for the below html:
<div class="generalVideo">
<div id='generalButton'>
</div>
</div>
like so in css:
#generalButton{
background-image:url(files/gss.png);
background-position:center center;
background-repeat: no-repeat;
background-size: 70%;
}
nothing shows up.
However, if I keep the css the same and add an image to the html like so:
<div class="generalVideo">
<div id='generalButton'> <img src="files/gss.png" alt="">
</div>
</div>
So you can see the two images overlapping on each other in different positions. If I deleted the background-image from the css, the img in the html also disappears. Why is this happening?
In the first instance there are no dimensions for the background-image to take up so nothing shows.
In the second instance the img is an element within the HTML and in the absence of any other styling it shows at its 'natural' dimensions.
Also, by default, the parent div will take on width and height: auto so essentially the img gives it some width and height. So the background-image also has some dimensions to work with and can be set up at 70% as required.
To get just a background image to show you need to tell the system a width and height. This snippet gives it a square in terms of vmin units:
#generalButton {
background-image: url(https://picsum.photos/id/1015/200/300);
background-position: center center;
background-repeat: no-repeat;
background-size: 70%;
background-color: pink;
width: 50vmin;
height: 50vmin;
}
<p> background-image only, no img element: </p>
<div class="generalVideo">
<div id='generalButton'>
</div>
</div>
Note: the div has been given a background color too so it's size is obvious.
They overlap because the background-image is centered and the img-tag is not.
You need to set a width and height on the div if you only want to use the div.
#generalButton {
background-image:url(https://picsum.photos/200);
background-position:center center;
background-repeat: no-repeat;
background-size: 70%;
height: 200px;
width: 200px;
}
<div class="generalVideo">
<div id='generalButton'>
<img src="https://picsum.photos/150" alt="">
</div>
</div>
New at Bootstrap. I'm having a problem setting my background image to follow the header image.
The header section has it's own full-screen background, which I then want to be followed by a tiled background image.
I tried:
<div class="header">...</div>
<div class="main-body">
<div class="container">...</div>
<div class="container">...</div>
...
</div>
<div class="footer">...</div>
with the following stylesheet:
.main-body {
text-align: center;
background: url(../img/setttings-bg-black.jpg) no-repeat center center;
background-size: 1024;
background-color: #000000;
}
.header {
text-align: center;
color: #000000;
background: url(../img/promo-bg.jpg) no-repeat center center;
background-size: cover;
}
The problem is that the main-body background's top is hidden by the bottom part of the header body.
What am I doing wrong?
Verify this link or link
have a solution for you.
problem 1)
What I did is I added a <img> below the first div (so the div with the class intro). The img has a clas of bg.
Than add this css:
.bg{
position:absolute;
z-index:-1;
width:100%;
height:100%;
}
here you have a working fiddle. I added a lot of <br> tags to show you it works.
You can also try to set the background image height:100% and width:auto;. If you do this the image won't be so crammed together on some screens.
problem 2)
I Gave every slide a class slide1. I also added to all the slide classes position:relative;. Taka a look at this fiddle.
i hope your question is now anwsered. If you have other problems, feel free to ask.
My header-banner is set to width 100% but its not covering everything on the top it looks like its 70% and text is not setting to center, When i inspect element in chrome it shows 100% width but in actual display it does not. How can i fix this issue ?
main.html
<div class="row">
<div class="col-md-12">
<div class="header-banner">
<h1>Server</h1>
</div>
</div>
</div>
main.css
.header-banner {
background:url('../img/header_master.jpg');
width:100%;
min-height:70px;
background-repeat: no-repeat;
text-align: center;
}
Try It:
.header-banner {
background:url('../img/header_master.jpg');
width:100%;
min-height:70px;
background-repeat: no-repeat;
text-align: center;
background-size: cover;
}
Bootstrap rows have a margin associated with them. So when using bootstrap rows there will always be a margin unless you remove that in CSS.
I'm using JSSOR image gallery and currently it is stretching portrait images.
I have made a css class where it is no longer stretching:
However I can't get the imace centered in the div.
<div>
<div class="portrait" u=image style="background-image: url(../img/zachry/1.jpg"> </div>
<div u="thumb"></div>
</div>
Here is the CSS?
.portrait {
position: relative;
width: 850px;
height: 565px;
background-repeat: no-repeat;
text-align: center;
}
How can I get the image centered?
You are using an image as a background from a div.
Almost any element has an attribute called: background-position which can take center as value to center the image given into the middle from the element.
so it could be something like:
.portrait {
...
background-position: center;
}
Using the following code in your CSS should work:
background-position: center;
I think of two possible ways....
div {background-position: center;}
div {margin-left:auto; margin-right:auto;}
I'm a beginner and I tried to make one page by myself, however, the result is not good. I will try to explain what I need: Full-screen page with two images, one image will cover 50% of horizontal space of browser window, and second image will be on right side covering the rest of this page. I need both images to be responsive and to always keep 100% height. When the window is resized, left and right sides of both images will be cropped.
Very similar to this: http://www.gt3themes.com/website-templates/soho/striped_landing.html
Is this difficult to make? I tried to follow some guides on the web, but the result was that my images were stretched and not cropped. Maybe I am completely wrong and I need to create two columns and then put images inside?
I will appreciate any help.
My current code is:
.photo{
size: 100%;
position: relative;
overflow: hidden;
}
.photo img{
max-width: 50%;
height: 100%;
}
The site you linked more or less did something like this:
http://jsfiddle.net/xnLn6s5o/
HTML
<div id="container">
<div id="left" class="halfwidthcontainer">
<div id="left-image" class="image"></div>
</div>
<div id="right" class="halfwidthcontainer">
<div id="right-image" class="image"></div>
</div>
</div>
CSS
html, body, #container, #left, #right, #left-image, #right-image {
height:100%;
}
.halfwidthcontainer {
float: left;
width: 50%;
}
.image {
background-size: container;
background-repeat: no-repeat;
background-position: 50% 50%;
}
#left-image {
background-color: red;
background-image: url('');
}
#right-image {
background-color: blue;
background-image: url('');
}
The general idea is that two containers sit side by side, floated (see this answer as why to use floats to position containers side by side instead of inline-block).
The idea thereafter is to explot the CSS background property which will allow you to get the overflow/positioning effects you want. You can read more about that here.
You're going to want to fill in the background-image properties of the #left-image and #right-image IDs to add the images you want.