As shown in the image below
example
May i know how to hidden the overflow of the image.
The curve shape behind I'm using shape divider in Bricks.
Any solution i can do to hide the overflow?
Wordpres Bricks
Solution about the issues
Related
firstly, I'm a UI/UX designer, please excuse me for my poor CSS/HTML.
I'm trying to introduce a background blur under some text which is on an image. Currently the div is set to a slightly transparent red colour which creates this overlay.
This is wordpress based and as such I'm trying to figure out a way to do this via CSS by inspecting the site in Chrome
Please look at the photos and descriptions for better understanding into what I am trying to do.
First image is the current situation
Second image (4) is the desired situation
Unfortunately my reputation isn't high enough to display more
So based on what the user colonelsanders has commented, I was able to introduce a new div and blur the background!
Thanks everyone and sorry for the poor post
You don't give any code so I'll have to guess.
If your main background is fixed, then you can add an extra element ( we'll call it "cover" ) in the element that you want the blurred background ( we'll call it "blur" ), stretch the "cover" to fill the "blur's" width and height, set the main background to the "cover" with fixed position, and use the blur filter on it.
When the content of my slides in a deck.js presentation gets larger than the vertical window, the browsers are shrinking the displayed content.
The more content, the smaller the display gets. The effect seems 'page' wide, as the top left corner of the slide moves further away from the top left corner of the browser window -- as if I were zooming out from the page. I can navigate to the all of content with the mouse, but no scrollbar appears.
What is going on here, and how do I get control of the display size in these situations?
(Apologies for a possibly poor question -- I don't know quite enough CSS to know what additional information I should or could provide here. I'd be glad to add in answer to questions.)
Thanks.
If you want to keep consistent (constant) font size and layout across slides, I would recommend using the "fit" extension from this page http://home.heeere.com/tech-deckjs-ext.html .
On the negative side, this extension currently prevents you from using the horizontal and vertical transition themes. It could be patched to allow these transitions.
On the positive side, this extension will allow you to have a scrollbar on your slide. You can do that by adding the following style in your page:
div.deck-container > .slide {overflow-y: scroll;}
I have my wordpress theme built but there is one problem, I want to have an image behind my footer but not be part of it. In my site I have my footer image that repeats horizontally and an image behind it which is a compass. My issue is when I put the image in it acts like part of the footer and not the background (it's not my background image just on top of it). Here is a link to my blog (the code is too long to post here):
http://blog.zombiesarefierce.com/
also here is a pic of what my footer is supposed to look like (the image i'm talking about is the compass), any help would be greatly appreciated:
http://www.freeimagehosting.net/jq19y
Just put your compass image in a new division and apply z-index to all elements at that point. Z-index specifies the stack order of an element.
An element with greater stack order is always in front of an element with a lower stack order. (Negative numbers are allowed)
Check this link to know more about z-index.
Good day, I have a DIV of fixed width and height on my HTML page. In normal state it should show image A on the background and in hover state it should show image B. I know how to do it using CSS and two image files A and B. Somewhere I saw those two images (A and B) put into a single image file and then they somehow wrote CSS so that in normal state the DIV showed upper half of the image on the background and in a hover state it showed the bottom half of the image. Could you please advise CSS code to achieve this? The DIV has no position set but it is a child of a DIV with relative position. Thank you in advance.
Vojtech
This is called CSS spriting and is an awesome technique that everyone should use.
See this answer for a good overview. What it comes down to is having a DOM element with a defined height and width and using a background image that is larger than that area. Then you can selectively show only portions of that background image using background-position
Greets,
I'm currently working on a website and have stumbled upon some layout difficulties. What I want is a website with a header (fixed hight) and followed by three columns (left, middle, left). I want the columns to stretch from top to bottom. But when I set them to a 100% height, the page gets overflow from the static header on 140px. I have included an image of the page with lots of colors to show the divs (http://oi51.tinypic.com/974rqd.jpg).
Any help is greatly appreciated!
This should solve your problem:
http://www.cssplay.co.uk/layouts/three-column-layouts.html
Set a background image that repeats vertically. Either one image for each section, or easier yet, a single image that contains the dividers of all 3 sections.
See here for an example of this being done.