I am building a Wordpress site. On the homepage, I am trying to position a ball without affecting the other divs under the slider, which the theme maker has given the same class name. What I want to do is make the ball small and place under the writing. The theme does not allow me to assign a class to that image. This is what I've tried but it affects the other images in that row. Could someone help me please? I am thinking I may be able to use first child but not sure. Thanks!
.cg-strip .cg-strip-bg {
background-size: contain !important;
background-position-y: 90%;
background-size: 50%;
}
Use:
<div class="cg-strip-bg " style="background:url(http://adasportsandrackets.com/wordpress/wp-content/uploads/2014/10/ada-460-mole150x146hp.png) no-repeat center bottom / 80%!important; "></div>
Note!! don't use: background-image: but background:
with all this stuff:
url(blabla.png) no-repeat center bottom / 80%!important
80% is the size, might be a bit too much below your text, but you're free to fix till you get the desired result.
Related
I am quite new to the css and bootstrap i have searched and tried the w3c solution and also the SO but did not work well. Actually i want to have an image as a background on my homepage. on which there would be my content like 3 small buttons/icon in the middle of the page.
I have tried this
<div id="homepage">
</div>
css:
#homepage{
background: url(../images/homepage.jpg);
background-size: 100% 100%;
background-repeat: no-repeat
}
but it is not working.
2nd Solution:
Second thing which i tried was to include a img tag then add my content and drag to the middle by absolute position which i think is not a good way because responsiveness did not remain there.
Can any one help me in this regard.
Assuming you double checked the image path,I think the problem is the size of the div.
try giving your div a fixed width and height in order to test if at least this way the image is showing.
<div id="homepage" style="width:500px;height:300px">
</div>
Then check out how to use the bootstrap grid system in order to make your div as big as you wish.
You can try this:
#homepage{
background: url(https://paulmason.name/media/demos/full-screen-background-image/background.jpg);
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
width: 100%;
}
http://jsfiddle.net/y558vo9a/
if you want the background image to be in your index page, there is no need in adding '../' and no need in adding background-size, -repeat when you can actually set your code so;
background: url(images/homepage.jpg) no-repeat 50% 50%;
but if it works for you, you can use it so. And i also noticed, you forgot to close your background-repeat with ';'
My image: http://path.com.my/v2/wp-content/uploads/2016/05/Home-Page-Banner-B.jpg
Website: http://path.com.my/v2/
Check 2nd slide
The slider image, no matter what resolution of images I put in, it will still 'zooming' in too much in the center and cut off too much details. Changing the the image aspect ratio doesn't seem to do any good either.
I have try to use background-size: cover, but it would leave blank spaces on the side, and doesn't do any good in different screen sizes too.
Any idea on how to best achieve this so I can put in my image with the least crop or zoom in?
Try the following:
.home #content .slide {
/*[...]*/
background-attachment: fixed;
background-size: 87%;
background-position: 250px 0;
}
I already googled this for a while, but simply can't find the answer. So, my question is: how do sites like this
http://tasag.de/
work? There are several background images that are shown behind the content box when you scroll down. When you scroll up and down you see that they occupy the whole screen, but sometimes you can see two of them, one at the upper an one at the lower part of the screen, at the same time. How does this work? I simply can't figure it out.
Thanks a lot
If you look at the css of one of those backgrounds you find the key declaration:
background-attachment: fixed;
This means the background doesn't move, even when the user scrolls, allowing you can have different scrolling divs and the background will always look fixed
Here I prepared a sketchy fiddle: http://jsfiddle.net/3UpUb/
.container2 p{
background-image: url(http://tasag.de/wp-content/uploads/2014/01/img-3-blur.jpg);
background-repeat: repeat;
background-position: center top;
background-size: auto;
background-attachment: fixed;
}
You can use Parallax scrolling and put the speed to 0. Then the image stays fixed but will change when you scroll to next background image.
I used this Parallax plugin.
I have a template for a website, it's an image which i have set as a background image. Now what i need to do is place html over it. For example there an part of the whole template where some images are but eventually when they are clicked they need to do something. So i need to place some divs over the whole template containing the different parts.
I don't know what the right approach for this is. What i've done right now is set the background image like this:
#body{
width:1280px;
height:8000px;
background: url(something.jpg);
background-repeat: no-repeat;
background-position:center;
}
So it always centers the image if you were to resize the window it would stay centered. This works fine.
Now i need to add another div in the body (of course) which needs to stay on top of the image.
I've tried and searched on the internet alot but the div seems to have a position that can't move. so how i resize the window it keeps in the same place.
I hope it's a little clear what i'm trying to do, and keep in mind this is my first time doing something like this so any help is greatly appreciated.
Thanks in advance!
PS: i'm not trying to cover the whole page in the background, just the original size which is 1280 all the time, and if the window gets resized bigger than 1280 in width it needs to center the image.
(if you're trying to set an image as the body's background to cover the whole screen)
Instead of settings width's and height's on your body, you should just set the size of the background to cover
css-tricks.com/perfect-full-page-background-image
body {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
You can do this so the image is always centered
.main{
width:600px;
margin:50px auto;
}
<div class="main">
<img src="path to img"/>
</div>
I was wondering how i can make an image across the browser such that even though, my website is viewed in a larger monitor, the image will still span out and extend without showing a white space at the end.
You basically have two choices:
Use a repeating pattern that fills the entire width: you can do this using
width: 100%; background: url(your-image-file) repeat-x
Use a fixed main image and a background filler image that fills the remaining area: the background would use the same code as above and the main image could be an img within the background container.
Well, to start, lets clear your margins with this code.
* {
margin: 0;
padding: 0;
}
By using this in your style sheet or section, it will allow for those images to stretch all the way with no white space.
Next, you'll want to create an image that doesn't look skewed. To do this you will need to create it in a fairly wide format to begin with. If you are looking to fill the entire background, I would suggest 1028X768 px as a good size.
Finally, it's time to place the last bit of code and get it all working.
html {
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;
}
This will work with dang near all current browsers (except IE8 and below).
In order to place an odd size image that you want to span but not entirely cover, I would suggest using a <div> to create a place for the image and add a style to the <div> that says width: 100%;.
This can be done with height as well.
Hope this helps.