I'm having so difficulty making a my social div float right. I noticed when I add float:right the size of the body size changes which is why it is moving the div down a bit but without the float:right the body size is correct. how can I fix this?
Website
Here's my code:
#social{
width:102px;
height:34px;
padding-left:1%;
padding-top:1%;
}
body{
background-image: url('images/bg-2.jpg');
background-repeat: no-repeat;
background-position:bottom;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
max-width: 100%;
overflow-x:hidden;
}
You don't even need to use float: right, please use the CSS below and this should work perfectly:
#social {
width: 100%;
height: 34px;
padding-right: 1%;
padding-left: 0%;
padding-top: 1%;
text-align: right;
}
#icons {
padding-right: 0.5%;
}
actually problem is with your margins, just adjust the margins on #block element than problem will be solved
for instance turn off the margin from #block(both left margin and top margin) and apply float:right to #social and see.
the issue is because of margin-top:15% on your #block.
add position: absolute; to your #block style, and then float:right your #social
that fixed the issue.....
Related
Hi guys I'm using stellar.js and it is working quiet well for desktop devices. But on mobile devices the background-image will be displayed only a part of it. It is not showing the whole image but the left corner of the image. The problem must be the css code. But I don't see it. Thanks for the help guys!
My css looks like:
.intro-section {
padding: 150px 0px;
text-align: center;
background-attachment: fixed;
width:100%;
height:100%;
position: relative;
background-position: center center;
background-size: cover;
background-image: url(../images/frederick_meseck_wood_logo.png);
background-repeat: no-repeat;
}
#media(min-width:768px) {
.intro-section {
min-height: 100%;
}
}
Try this in your media query:
#media(min-width:768px) {
.intro-section {
background-attachment: inherit !important;
background-size: 100% 100%;
background-repeat: no-repeat;
}
}
The first background-size parameter is the width, you can increase this value when going to smaller devices (I recommend this)
I have some dynamic images as a background for some divs. Those have variable widths and heights. In front of each such a div i have a radio button. There is a way to align through css each div to be exactly at the middle referring to the radiobutton in front of it? I cannot use fixed background height since there are dynamic and the height are different. I was trying to put background-size: 100% 100%; or background-size: auto;
Doesn't work
Any help is more than welcome, thanks!!!
Try:
background-position: center center;
=====
UPDATE:
It's a lot easier working with your fiddle!
Try this:
div.VISA_logo {
background: url("http://www.globalworkandtravel.com/sites/all/modules/customshare/includes/facebook.png") no-repeat;
}
div.VISA_CARTE_BLEUE_logo{
background: url("http://www.discoverireland.ie/App_Themes/DiscoverIreland/images/discoveries/button-add-trip-small.png") no-repeat;
}
div.MasterCard_logo{
background: url("https://s3.amazonaws.com/sugarstats/s3_avatars/7287/1234222094_norm.jpg") no-repeat;
}
div.AMEX_logo{
background: url("http://www.uappointment.com/images/google-small-icon.png") no-repeat;
}
div.PAYPAL_logo{
background: url("http://i.imgur.com/EqgOS.png") no-repeat;
}
div.VISA_logo,
div.MasterCard_logo,
div.PAYPAL_logo,
div.VISA_CARTE_BLEUE_logo,
div.MasterCard_DE_FR_UK_logo,
div.AMEX_logo {
width: 105px;
margin-left: 5px;
height: 42px;
float: right;
margin-right: 30px;
background-position:0 center;
}
I am not good at CSS and I want to define div position.
When you click the div element, I will add "selected" to class with javascript. But I have a problem about width.
How can I solve that?
CodePen Demo
.insideDiv {
width: 210px;
margin : 15px;
float:left;
height: 210px;
overflow: hidden;
background: no-repeat center center;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
div.selected {
border: 5px solid #25a9e6;
}
.container{
margin: 0px auto;
}
Adding a 5px border to a div, expands the div's dimensions by 5px in each direction. I believe you want to add box-sizing: border-box; to .insideDiv. That way the border won't change the div's dimensions.
using toggleClass or addClass
$('.insideDiv').click(function(e) {
$(this).toggleClass('selected');
});
here my example Code
I have applied set background-image on one of my <div> with the following properties below:
.mydiv-left {
background: url(path to image) no-repeat center center fixed;
height:auto; // also tried with 100%
background-size:auto // also tried with "100%" and "100% 100%" as well as "cover"
}
This result is no image display, but when I set the height to this image, it cuts off the image. As image is of high resolution and I want it to fit in the smaller area of my div without removing any part/information.
Keep in mind that background image is dynamic and keep on changing for other divs within the loop.
Try this
CSS
.mydiv-left {
background-image: url(path to image);
height:(in px);
width: (in px);
background-size: 100% 100%;
background-repeat: no repeat;
background-position: center center;
}
If you post the entire code it is easy to find solution.
<div> without content/ height will result in 0 height. I guess that's why you can't see your image.
Give your <div> a size, and background-size should do its work.
http://jsfiddle.net/LsdDE/
.d1, .d2 {
border: 1px solid grey;
width: 200px;
height: 200px;
background: url(https://www.google.com.tw/images/srpr/logo11w.png);
}
.d1 {
background-size: auto 200px;
}
.d2 {
background-size: 200px auto;
}
Simplest suggestion would be to give min-height to your div in pixels... DEMO , keeping your markup same, below is the CSS.
CSS
.mydiv-left {
background: url(http://www.wallng.com/images/2013/08/image-explosion-colors-background-beautiful-263613.jpg) no-repeat center center fixed;
color : #FFF;
min-height:200px; /*this is the key*/
height:auto;
background-size: 100% 100%;
background-repeat: no-repeat;
}
if you give height:auto;, it would scale the div to content height.
if you want to show the div anyway, min-height is a solution
Thanks all for helping me out, I was able to get it done with the following below code:
mydiv {
background: url(images/bg.jpg) no-repeat;
height: 150px;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Main thing was last four lines that worked for me the way I wanted.
.mydiv-left {
background-image: url(path to image);
height:(in px);
width: (in px);
background-size: 100% 100%;
background-repeat: no repeat;
background-position: center center;
}
I have a large image to be use as a background-image of a page. What I want is that the height of the image will be stretched to fill the height of the page. It should be centered also.
background: black url("/image/background.jpg") no-repeat fixed center;
background-size: cover will do the trick in modern browsers - see mozilla's documentation for more details.
For older browsers (particularly older versions of IE), I've had a lot of success with jQuery plugins like this one to emulate the behaviour.
here is a good writeup
http://css-tricks.com/perfect-full-page-background-image/
the gist of it being
body {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
add this to the css
{
background: black url("/image/background.jpg") no-repeat fixed center;
height: 100%;
width:100%
}
I think using a div would be the easiest way to get the effect you are looking for.
<div id="background">
<img src="/image/background.jpg" class="stretch" alt="" />
</div>
<style>
#background {
background-color:#000000;
width: 100%;
height: 100%;
position: fixed;
left: 0px;
top: 0px;
z-index: -1;
}
.stretch {
width:100%;
height:100%;
}
</style>