i try many ways to force my image full width but it can't
you can see my arrows and my html and css code :
<div class="homeContentWrapper">
<!-- WELCOME BOX-->
<div class="imgBghome">
<img class="bgCau" src="images/cau.jpg">
</div>
</div>
and my css
.homeContentWrapper{
position: relative;
height: 726px;
width: 100%;
z-index:0;
}
.imgBghome{
position:relative;
overflow:hidden;
height:100%;
width:100%;
right:0;
left:0;
top:0;
bottom:0;
margin:auto;
z-index:0;
}
please give me advices
thank you!
You can try below code:
body{margin:0;}
You could set the image as a background of the body. It's a clean way of setting a background and you will use no HTML elements.
body {
background-image : url("images/cau.jpg");
background-size : cover;
}
Related
Idea is do not use vertical or horizontal scroll bar in body section. I have a div which is having css like this:
display: flex;
height: 100%;
I want inside div height to be fully responsive. The height should be auto adjusted based on the height of the device. for inside div we can have scroll bar no problem based on the data.
Hope you guys understood my question, please help.
as you don't want scroll on the body but inside your main div.you can achieve using following css and html.
<div class="main">
<div class="content">
// you content goes here...
</div>
</div>
and the css for .main class and for .content class are as follows.
.main{
position: absolute;
top:0;
bottom:0;
left:0;
right:0;
}
.content{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
overflow: auto;
}
here is the demo https://codepen.io/anon/pen/MpLZqd
i hope this will help.
I want to use background-size:contain and background-size:cover at the same time. I want to have my background image stretch 100% width x 100% height of the browser window at all times while maintaining the scale of the image.
Here is a perfect example of what I'm trying to do
Is there a pure css route to achieve this?
Here is my code:
<div class="page-section clear">
<div class="landing_photo clear" style="background-image:url('<?php echo get_template_directory_uri(); ?>/img/tempory_landing.png');">
</div>
</div>
.page-section {
width:100%;
height:100%;
margin:auto;
}
.landing_photo {
width:100%;
height:100%;
background-position:center center;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-repeat:no-repeat;
}
In-line styling is not great, so first of all I would put your image url in the CSS file.
Second, you need to assign a fixed value to height and width to .landing_photo.
This the resulting CSS for achieving what you want:
.page-section {
width:100%;
height:100%;
margin:auto;
}
.landing_photo {
width:500px;
height:500px;
background-position:100% 100%;
background-repeat:no-repeat;
background-image:url(http://upload.wikimedia.org/wikipedia/commons/1/1a/Bachalpseeflowers.jpg);
}
and the markup
<div class="page-section clear">
<div class="landing_photo clear"></div>
</div>
I have created a DEMO for you.
How to, as the title suggests, make a div didn't move. So, when the user scroll our web, the content is moving but not the div-element. If let say the div-element I want to implement is a sidebar, how can I do that with only a CSS script? (or with HTML5 power).
<style type="text/css">
div.fixedDiv{position:fixed;top:0;left:0;}
</style>
You can try this... Jsfiddle
Html
<div class="wrapper">
<div class="fixed"></div>
</div>
Css..
.wrapper { position: relative; height: 1500px; background:red; }
.fixed { position: fixed; left:0; top:50; width:100px; height:100px; background: green; }
<style>
#yourdiv{
position:absolute;
left:100px;
top:150px;
}
</style>
<div id="yourdiv">Hello I'm div</div>
Adjust the coordinates left and top as you desire.
Anyways you can see css positionings here.
This css has been somewhat difficult to figure out...Basically what I want is what is in this picture, but with dynamically changing content.
so I set up my html like this, basically all the elements are piled into the wrapper, the pictures and titles will be dynamically rotating and will be different widths and heights:
<div id="wrapper">
<div id="title"><h2></div>
<div id="image"><img></div>
<div id="leftbutton" class="but"><img></div>
<div id="rightbutton" class="but"><img></div>
</div>
Everything I have tried Hasn't worked out. how should I go about this?
The closest I have got is this, but the title field can change heights and that makes this method not work, since, I have to position the image relatively and its relative position changes with the title element growing and shrinking:
#wrapper{
position:relative;
text-align: center;
}
.but{
z-index:20;
position:absolute;
}
#leftbutton{
left:0px;
}
#rightbutton{
right:0px;
}
#title{
z-index: 3;
display: inline-block;
width:auto;
min-width: 80px;
max-width: 340px;
}
#image{
z-index: 1;
position: relative;
top:-21px;
}
If you mean the Title in the center use this way:
#title {
margin: 0 auto;
width: /* your width */
}
the position should be relative at the wrapper.
JsFiddle UP
I just reorganized the body structure, adding one more div and floating everything.
Then inside the central section I added title and image that you can style to be centered to the relative div.
If you provided some example code we would better be able to assist you. In the meantime, the following code should take care of what you're looking for:
HTML
<div id="wrapper">
<div id="title"><h2>Article Headline</h2></div>
<div id="image"><img></div>
<div id="leftbutton"><img></div>
<div id="rightbutton"><img></div>
</div>
CSS
#wrapper {
background:#6cb6d9;
display:inline-block;
position:relative;}
#title {
position:absolute;
top:0;
width:100%;
text-align:center;}
#title h2 {
background:green;
color:white;
padding:10px 15px 10px 15px;
display:inline-block;
max-width:200px}
#image {}
#image img {
min-width:200px;
height:300px;
width:500px; }
#leftbutton {
position:absolute;
left:0;
top:0;
height:100%;
width:75px;
background:black;}
#rightbutton {
position:absolute;
right:0;
top:0;
height:100%;
width:75px;
background:black;}
Though instead of hardcoding the img size, just remove those lines of CSS to have the div automatically adjust to the default size of the img.
http://jsfiddle.net/b7c7c/
None of these solutions worked correctly, ultimately the way to get it to work is with this trick: How to center absolutely positioned element in div?
Then you just position all elements absolutely within the wrapper and the sub elements relatively as seen in the post
There...
#logoWrapper{
background-image: url(../image/bg_img.jpg);
height:86px;
width:100%;
}
Q> How to fix the size of the image get into #logoWapper same with its Wapper automatically?
#logoWrapper img{ // not work
height:86px;
width:100%;
}
Thank you!
For a background image in CSS3 if you want to stretch not repeat you can use background-size: 100%;
Documented here http://webdesign.about.com/od/styleproperties/p/blspbgsize.htm
Alternatively you can layer a absolute positioned image inside a relative positioned div and add an additional wrapper.
<style>
#wrapper {
position:relative;
...
}
#wrapper div, #wrapper img {
position:absolute;
top:0px;
left:0px;
...
}
</style>
<div id="wrapper">
<img ... >
<div> this goes on top of image</div>
</div>