I can't believe I can't find this ANYWHERE, but I'm just wondering if anyone knew how to inversely repeat an image in blogger. For example, I'm using this CSS coding for a background image
body { background: url(http://3.bp.blogspot.com/-yqiPjoMManc/UprceV8zY7I/AAAAAAAADZw/GP119GZKgzM/s1600/new+background.png) repeat fixed top center; background-color: none; }
.body-fauxcolumn-outer div { background: none !important; }
anyway, it looks super weird on screens of bigger computers, as you can see here: http://prntscr.com/292k6l
as when you repeat the image, the sides don't match up at all. Does anyone know how to continously flip around an image in blogger when repeated? Thanks!
Try cut pattern separately from the gradient and put them on different layers. If you give PSD i can help you. Gradient will stretch across the width of the page, the picture is repeated over the gradient.
Related
I've made my own static website from scratch using html5 and css(3) only.But I have got 2 issues.
The first one is the white space between the top's menu and header's image bottom.I've tried everything.
Maybe the only solution for that is float:left; but then the image goes into the navigation tag or negative value on margin's property but I've heard that this technique is bad.
The second issue I'll display via image http://www.filedropper.com/discoversite that's my simple WebSite. I know my css is awful but I'm still a beginner. The second issue is here. http://postimg.org/image/5adp6379d/ . As you can see the text is going out of the box. (I am using % in css for more responsive). I will be glad if anyone can help me.
I can only have a guess for your first issue as I don't know the exact code for your website (create jsfiddle :D ). Try to apply vertical-align: bottom; or display: block; to your header image. Why? Because images are placed like text and some letters like g, j, q and p are going underneath the bottom level. Your browser will leave a tiny space for these letters. Also setting a min-width is a good solution like Kirk Logan said.
And for your second problem there are multiple solutions (depending on what you want):
You can handle your content with overflow: hidden; or overflow: scroll as Kirk Logan suggested. But this wouldn't make any sense in the case you have shown us in the picture.
Or (is a little more complex) you could remove the white borders on the left and right side (just when the screen is too small) in order to gain more space for the text. This can be done by:
#media only screen and (max-width: 768px) {
#BigBorder1 { border-width: 0px; }
#BigBorder2 { border-width: 0px; }
}
Everthing inside the outer brackets will only be applied when the screen's width is smaller than 768px. But to be honest this is usually done the other way round: When the screen is bigger than 768px then something happens. This simplification is only in order to make it easier for you.
I would like to have two background images for a fansite layout I made: one background should be repeated both horizontally and vertically, the other one only vertically and needs to have a specific position. I made some search on StackOverflow and I added the following to my CSS:
body {background: url(images/bg.png) 162px repeat-y, url(images/bg-all.png) top repeat;}
Clearly I'm doing something wrong though, because the only image showing up it's the second one, the bg-all.png file. I'd need the bg.png to be over bg-all.png because it's the content background.
In order to make things clear, even though it's far from being finished (in fact, there are several other issues but I think it's better to solve one problem at a time), I'm adding a link to the test version of the layout: http://gwyneth-paltrow.org/test/
I don't know if it matters, but it's a Wordpress site.
I'm definitively not an expert and every suggestion is very much appreciated.
Thank you all in advance!
the second value of the background position is missing, try this and substitute the ??? with a value:
body {
background-image: url(images/bg.png), url(images/bg-all.png);
background-position: 162px ???, top ???;
background-repeat:repeat-y, repeat;
}
also note that the first declared background image is ON TOP of the second one.
http://jsfiddle.net/gB7js/
I have a website with a repeated background image.
background: url(images/back_small.png) repeat center center fixed;
I would like it more, however, if the image were not repeated one copy after an other, to add some variation.
The final result should be a sort of a dotted pattern where the image appears now and then, instead of being instantly repeated.
I have no idea if this is possible with CSS, but if so... I'm waiting for idea :D
I recommend using a variation of the multiple background technique where you save your image with differing sizes of transparent "space" around it based off prime numbers.
It is known as the Cicada Principle on this site.
The prime numbers introduce the "randomness." Of course, if you do not want them to overlap in any way, then you will need to be very selective exactly what image sizes to use to insure no direct overlap occurs within a normal size monitor display.
My solution is to use the same image twice (we can put as many background images we want).
Then use different repeat-x and background positions to dictate the final look of the background. My solution is as follows:
background-color: white;
background-image: url(../../../../../assets/images/my-watermark.png),
url(../../../../../assets/images/my-watermark.png);
background-repeat: repeat-x, repeat-x;
background-position-y: -60px, 400px;
background-position-x: -150px, -270px;
There's not really a way to do exactly what you're asking in pure CSS. I have however seen people introduce "noise" into a site's background using multiple images.
Here's an example of using multiple backgrounds with CSS.
Here's a stackoverflow question regarding noise in gradients.
Hopefully this gives you some ideas to get a feel for what you want on your site.
I'm having a big issue with something so "small" I can't figure it out and I'm reaching out to everyone here. The issue I'm having is this:
I have photos which are roughly 512px or 800px wide I want to fit, CENTERED, in a circle display area and keep my hover effects. I also need to size them the photos so the centered part shows a decent amount of the photo.
The current code I'm working with will make them perfect circles IF the photos are perfect squares. The problem is when the photo is a rectangle, it turns into an oval.
I had created a div like below using overflow:hidden and the css but it conflicted with the current CSS. Any help would be appreciated immensely!
.thumby {
width:200px;
margin: 0 auto;
overflow:hidden;
position: relative;
height: 200px;
border-radius: 100% 100% 100% 100%;
}
img.absolutely {
left: 50%;
margin-left: -256px;
top: 50%;
margin-top: -200px;
position:absolute;
width:512px;
}
Here's the link to my dev pages.
http://www.lmcodebox.com/b-test/index5.html
http://www.lmcodebox.com/b-test/portfolio.html
have you thought about setting the image as the background of the div? This way you keep all the effects you already use and there are ways to manipulate the background position without affecting the outside div. Other possible solution to have perfect round divs, is to use the ::after pseudo-class, like in this gallery tutorial:
http://webdesignerwall.com/tutorials/decorative-css-gallery-part-2
Sorry if I misunderstood you, hope it helps.
PS.: Beautiful test page by the way.
Well first, you'd only need to set the border radius to 50% to make something a circle, and if each corner is the same value, then you can just enter it once like so:
border-radius:50%;
As far as these images being rectangles goes, you could set your images as the background of a span, give it a height and a width that forms as square and use display block. This would keep the photos proportional, but allow you to make them square.
This however, could create a bit of a markup mess if you have a lot of images to display. Another solution, which means more work, but I would personaly do it, is to just crop your images into squares for their thumbnail with photoshop or some other image editing tool.
Above all of that, I don't see a width or height actually declared on the pages you linked. Are you sure you've placed them on the correct class? I see the border radius declared, but I'm only seeing a max-width: 100%; not width: 200px or height:200px
I re-thought the problem with the suggestion of using the images as backgrounds of an element as madaaah did above.
What I ended up doing was wrapping a DIV around my A tag like this:
then, I set the background of the A like this: style="background:url(PHOTO URL HERE) no-repeat;background-position:center;">
lastly, I made a square image (800 x 800) to go inside the A tag so it would keep the round shape and made it completely transparent so the background image is visible, while growing and shrinking in a "responsive" manner.
I am trying to use a background that surround the content area (just a bit of shading on both sides) as seen here: http://i.imgur.com/5X5D7.jpg
I left room in the middle for the fixed width layout which is 980px.
My body css is just this:
body {
margin: 0;
padding: 0;
background: url(../images/bg.jpg) center repeat-y;
}
It looks good on the homepage that has no content on it. But when I go to a test page that has a few paragraphs typed out and the scroll bars appear in my browser, there is a slight white line that appears to divide the background and the content area.
I tried shifting the background image shading by a pixel but then it does not work on the homepage..
Is there something else I can be doing in the css to prevent this?
I should say I am trying this in drupal with the zen theme and have not really changed anything else.
Made a jsfiddle for you: http://jsfiddle.net/Ja2SR/
Essentially I think you're looking at the browser trying to divine 1px in two, which it can never do. I don't really understand why it is an issue, though - the line appears inside the content area, which in the fiddle you can see as white next to red, but if your content area is white also, and has padding on both sides, which I assume it does... then having 1 more pixel shouldn't be too bad. Correct me if I'm assuming wrongly!