I'm trying to get two images to repeat ( one shadow image on the right, the other on the left) in the background exactly like this site.
So far I am unable to get the CSS code correct:
http://www.elegantthemes.com/preview/Modest/
I examined the code for that site and have the shadow images I wish to use. I tried to duplicate the code that Elegant Themes is using on a WordPress site running Headway:
.right-shadow { background: #ffffff url(images/right-shadow.png) repeat-y top right; }
.left-shadow { background:url(images/left-shadow.png) repeat-y top left; }
But it did not work.
Then I tried:
body {background:#ffffff url(http://website.com/wp-content/uploads/2012/07/right-shadow.png) repeat-y right top;}
This worked for the right shadow image - it appears correctly
Then I tried
body {background:#ffffff url(http://websitebuddha.com/wp-content/uploads/2012/07/left-shadow.png) repeat-y left top;}
This worked for the left shadow image - it appears correctly
Now when I tried and combine the code to display both shadow images along Y left and Y right as such:
body {background:#ffffff url(http://website.com/wp-content/uploads/2012/07/right-shadow.png) repeat-y right top, url(http://website.com/wp-content/uploads/2012/07/left-shadow.png) repeat-y left top;}
It does not work - both images do NOT appear
I also tried this:
body {
background-image: url(http://website.com/wp-content/uploads/2012/07/right-shadow.png), (http://website.com/wp-content/uploads/2012/07/left-shadow.png);
background-repeat: repeat-y right top, repeat-y left top;
}
This also does not work - both images do NOT appear
How can I get this to work exactly as it does with the Modest Theme by Elegant themes?
Thanks for reading.
I think you can use Multiple Backgrounds for your solution.
The background property has been overhauled to allow for multiple backgrounds in CSS3.
CSS
body {
background: url(http://www.elegantthemes.com/preview/Modest/wp-content/themes/Modest/images/left-shadow.png) 0 0 repeat-y,
url(http://www.elegantthemes.com/preview/Modest/wp-content/themes/Modest/images/left-shadow.png)center right repeat-y;
}
I hope this will help you :- http://tinkerbin.com/Iw4yJ1H3
here's one way you could do it. Not using backgrounds as such. Although you could place the images as backgrounds on the divs or simply have them added as images within the divs. You could even do away with the divs and sinmply use images instead of the divs.
http://jsfiddle.net/6UEXc/
Hope that helps.
Related
I'm having a problem on a website with Safari 7 (on OSX).
The website address is:
<Edit: Address not valid anymore. Sorry.>
If you click on vertical newsletter button, on the right edge of the content box, an overlay will pop-up.
This overlay looks good on most browser, but there is a problem with safari.
The overlay content is an absolutely positioned box of fixed width. It contains a div with the class "bg", which is a div with CSS position set to fixed and CSS top, right, bottom left set to 0.
The desired (and normally obtained) effect, is that this bg box sizes up to the width and height of the viewport. In safari, it just behaves as if it had it's position set to "absolute" - it just sizes up to the width and height of the container div.
Is this a known issue with Safari? Is there a bug filed? An update?
I could probably fix that by rewriting small parts of the HTML, CSS and JavaScript (if someone has an easier solution, you're welcome to share it!) but I'd like to understand what's happening at first.
I'm not sure what's going on with that positioning thing, but here was my approach to get the same result across the browsers:
#overlays .overlay { /* line 1081 */
...
width: 100%;
height:100%;
...
}
#overlays .overlay .content.text { /* line 1185 */
...
margin:0 auto;
...
}
You could use Z-index but Z-index is not reliable with position:fixed, as shown in this fiddle: http://jsfiddle.net/mZMkE/2/ use translateZ transformation instead.
transform:translateZ(1px);
on your page elements.
EDIT: In your code, Add this css:
.bla, .projects, .contact {
-webkit-transform:translateZ(1px);
-moz-transform:translateZ(1px);
-o-transform:translateZ(1px);
transform:translateZ(1px);
}
and then remove z-index refs from those elements and .intro.
Also You can try in other browsers as well
I want to accomplish a preview of an image gallery that is wider than the screen, using overflow: scroll (or auto).
To the right, a shadow that overlaps the last visible image should indicate that more images are visible to the right.
Here is a Fiddle: http://jsfiddle.net/SBdLg/
First, I thought: Easy, give that image gallery a box-shadow: inset. But that will be shown behind the images.
Now, with an overlapping div that has position: absolute, I reach the desired effect BUT the box-shadow also moves when scrolling to the right.
IMHO, this problem would also occur when using an image containing the shadow instead of the div on top.
Is the desired effect possible by CSS at all?
Removing position: relative from the outer DIV and positioning the shadow precisely where you need it (this is the ugly bit) will help you achieve this.
Check the demo: http://jsfiddle.net/SBdLg/11/
Wordpress noob alert! In my home page's HTML editor, I've added a div that is the footer. Loaded in this is a row of logo images that are supposed to sitting a straight line - however, they display staggered vertically. The top left logo (Ocean Basket) sits correctly, the next one has too much padding / margin, the next even more and then next logo even more and so on. I've set the padding and margin to 0 in the css, floated the images left - I cannot understand why this is happening! Any ideas anybody?
test site at http://inexshopfitting.co.za/
try adding display: block; to the images and get rid of the <br> in between.
(for example by adding #home_logostrip_box br{ display:none; } to your themes css file)
That should do it.
I had 5 images floated next to each other (20% each) and it worked fine in HTML, but not when site was converted to Wordpress; the images where floated but they 'stairstepped/staggered'. Like mentioned before, there are bracketed 'br' elements between each image---inserted by Wordpress. I fixed by adding to my images' container class, .classname br { display: none }. It worked perfectly.
I am making a website in Joomla.
And on my front page I have some images, which are links.
I want these images a's to get a slightly green effect, like opacity + green and stil have the original images below.
Is this possible to do with only css?
I can get the opacity to work, but not the green color.
Hope some one can help me.
Here is my site. it is the the small images under "Referencer" and "Nyheder"
This is doable with CSS. The main trick is that the links currently aren't surrounding the img block because their display type is inline.
Assuming the following HTML:
<img src="..." />
This is the CSS you need:
a.greenish {
background: green;
display: inline-block;
}
a.greenish img {
opacity: 0.5;
}
Adjust green and opacity to taste, obviously.
See this lovely jsfiddle for an example. Note that this includes addition CSS in case you only want it to turn green when hovered.
You won't be able to do what you want with pure CSS easily. There is no "overlay" in CSS. You can manipulate the background color/opacity, but the image would always be on top of that so it would not achieve the effect you want.
What you will need to do is to make the image the background of the A, then change the background do a similar image with the effect already applied. The images are small so you could easily make them sprites with the over look all in the same image. I did exactly this on the social icons at the top of my company website - http://www.bnrbranding.com/
On this page (http://www.bonniesphere.com/blog/elsewhere/) the "li" items have an image instead of a bullet. But the image is centered vertically, and in multi-line entries it doesn't look good. Can anyone tell me if there is something in the CSS that should be changed?
Here's the relative code:
.entry ul {list-style-type:none;}
.entry ul li{padding: 0 0 0 15px;background: url(img/ol.gif) no-repeat left center;margin-left:10px;}
Many thanks for your help...
replace center with top:
background: transparent url(img/ol.gif) no-repeat scroll left top;
.entry ul {list-style-type:none;}
.entry ul li{padding: 0 0 0 15px;
background: url(img/ol.gif) no-repeat left top center;
margin-left:10px;}
Just typed that out of the top of my head, but the "top" attribute might do it.
You could try and replace the left or center with the top tag, can't check for you as my webdeveloper addon is playing tricks on me. :(
I checked locally, it's the center tag. But there's still an extra bit of whitespace needed.
.entry ul li{padding: 0 0 0 15px;background: url(img/ol.gif) no-repeat left 4pt;margin-left:10px;}
Basically you need to specify the offset from the top. You had center which obviously centered the image vertically.
As a rough guess, I used 4pt but it depends on exactly where you want to position the image. With 4pt it roughly aligns it to the first line, but any change in font-size will screw up the positioning.
Personally, using top for the vertical position is a little too high for my likings.
This is very odd... I tried all three suggestions above, and none of them changed anything. A little more info, if it helps: it's a Wordpress blog (on my server) and I'm editing style.css through the theme editor. (That shouldn't make any difference...)
Do you suppose there's something elsewhere in the CSS that's making the image stay aligned at the center, over-riding this code??
Thanks for your suggestions... I had Firebug but had never used it - so with a combination of Firebug and the "compare" feature of BBEdit, I was finally able to figure it out! The template author had supplied a fix for the bullet points, but when I uploaded the most recent version of the theme, the problem occurred again. I found it, and voilà...
Thanks to the two programs, I was also able to find a fix for something else that wasn't working.
I'm a happy camper! At least... until the next time I run into something I can't fix...
:-)