I'm currently designing my Portfolio Website, and I've decided to implement a light Grid Pattern Background image, the squares are 32px.
The Problem I am having is keeping my content aligned to the grid pattern when resizing the browser window, when I make the browser larger, the content moves with it, and instead I want to fix the content in position, central and aligned with my grid pattern.
One thing I tried which actually made my content stay in position was
background:url (#) repeat center top;
but this messed up my grid image and started on half a square.
I have also tried the Margin:0 auto; to centre my content but again this doesn't align it to the grid lines....
So I am stuck...
Related
So I have a site with four main sections. The div for each section has a background image. All four backgrounds are the same size. There are also important elements in the images that I always want to show. In the original version of the page the image would resize depending upon the browser window size but much of the height of the background image was hidden in most cases. So I worked with a guy cleaning up the css and in the process we set the background images to always display 100% height. I was OK with some black background showing through on the sides a bit when necessary as long as I kept the height.
Anyway it worked well. The images expanded and shrank with the browser width, but they always showed the full height of the image. I signed off on the job and it looked good. Until I changed the browser window height (which is something I rarely think to do). Then the elements all spilled out to the right and left of the 4 main divs. I realize now that nothing in the document specifies the width of any section, just the height at 100vh. Only the fact that all four background images have the same dimensions makes it look like there are defined margins.
Is there a simple solution to this? I need to define a right and left border to the page to contain all of the inner divs and buttons, but I want to keep the 4 main divs showing 100% vertical height.
We are using
background-attachment: fixed;
background-size: cover;
background-repeat: no-repeat;
min-height: 100vh;
to define each of the four divs.
Basically I need a container surrounding the 4 main sections that expands to the width of the images, while still allowing the images to resize with the window, yet it keeps all of the other buttons and divs contained.
The page can be seen here: view-source:http://liquidpropane.io/hold/
It works right now exactly like I want except the buttons spill out the sides if the browser window is too short.
Thanks for the help Justin. In the end I did have to rethink the design. I wanted to keep the idea of using the background collages, but keep the responsive design. I moved the homepage logo out of the background image and into the banner section. Then I moved the important parts of the collage into the center part of the main image, and the less important parts to the sides. That way cropping at the sides will not matter. Finally I decided to remove the rounded text boxes out of sections 1 and 3. I will just use a small bit of landing page text (quite big in a thin font) on those pages and put the bulk of the content in sections 2 and 4. I have not added that text in yet, but the cleaned up version of the background and banner can be seen at http://liquidpropane.io/newhold
I guess the takeaway that is not specific to just my case is that if information in the background image is important and you want a responsive site, then the important part of the image needs to be centered because there is always the likelihood of cropping on the edges.
I am trying to position a logo just above the nav overlaying a responsive carousel. The trouble is, depending on the window size, the logo doesn't stay anchored to the nav. I don't know how to even approach this problem. Here is the project I am currently working on. Is there even a way to accomplish this?
The problem is that your logo (I assume you meant the transparent white round logo) is absolute positioned to the top of the browser, AND you're trying to make its position move with the resizing carousel. Try moving the logo inside the #slider1_container and absolute position, bottom:0 (instead of top:0)
This will force it to stick to the bottom of the carousel, regardless of the height of the slider, so it will appear to move with it.
Then, you've got the issue of resizing the logo to shrink with the window as well. If you set the logo's width to a percentage, and its height to auto, with a max-width set to whatever the greatest size you want to allow it to become, then that should manage that.
I'm trying to align one large image in the center of the div.entry-content on this page: http://rowanibbeken.co.uk/bankside-power-station-bankside-london (i.e. I don't want the smaller images to effect the centering of the large image) whilst I'd like the purchase button table at the bottom to be in line with the large image. So far the main problem has been the div. After trying every centering method under the sun I'm still unsure why it's shifted to the right and has messed up the alignment of the whole page. If anyone has any advice on this that would be great.
Thanks in advance!
Rowan
Take the images out of the table, add a clear:both; to their CSS, and give them each a margin: 0 auto;
The clear should make it so that nothing else is on the same line as the image no matter what size it is, and the margin will center them.
I have a common problem, although I have not been able to solve it with solutions found elsewehere on Stack Overflow. I'm trying to vertically align a logo and a search bar overlayed on an image in a header with unknown height (since the image shrinks when browser width decreases, since it's responsive)
The challenges are:
I have a header image (img, not a CSS background image) in one div block and a logo & search bar in two other div blocks that need to be overlayed on the background image.
The header image will shrink in size as browse width decreases, as it's a responsive site. That means I don't know the height of the header.
The logo is to be floated left and the search bar to the right.
I need to somehow center the logo and search bar vertically, so that they always appear nicely, regardless of the height of the header image that they are overlayed on.
Example: http://www-dev.channelaustin.org/about
Any suggestion?
The first answer here, essentially answers your question. As you only want vertical centring, you should remove the:
top: 50%;
I am trying to display a cropped center area of an image and have it work for different size images.
I had success setting a fixed width for the div containing the image and using overflow:hidden property, this works the way I'd like it to except this only shows the leftmost part of the image and the right side is hidden.
What I'd like is to display the center part of the image and have the left and right sides of the image hidden.
I'd go with the approach of making it a background image
.imghider {width:100px; background-image:url(./qed.jpg); background-position:center center;background-repeat:no-repeat;}
<div class="imghider"> </div>
As for different sizes you could use several classes or CSS expressions (or server side css generation)
I hope this helps.