Does anyone know how to getr this background effect with css?


Tags: css

Problem :

I am trying to create a site with a similar background to this website's.

http://citymob.co.za

Does anyone know how it is done?



Solution :

If you're talking about the page backround, it's done by using a large background image n one absolutely positioned div that covers the entire screen, with another absolutely positioned div with a repeating dots background layered over the top.

If you're talking about the see through effect of the main elements on top of the two bg images, this can be done with either opacity: .5;/*value*/; or background: rgba(125, 125, 125, .5)/*grey half opaque*/.

You can take a look for yourself by hitting F12 (in a good browser, IE's dev tools are shamefully bad) and taking a look at the markup and CSS.


    CSS Howto..

    How to remove scrollbar in PrimeFaces dialog?

    How to change the color of Bootstrap links

    How to vary the tone of an image dynamically using only css?

    How to style this views in drupal 7 /custom content type/?

    How to control layering in HTML/CSS without making links nonfunctioning?

    How do I combine this 2 sets of coding together to form a mega drop down nav

    How to replace HTML text with images using CSS content cross browser

    AngularJS ng-show animation cross-fade inside ng-repeat

    how to test css(3) style property value support, repeat value support?

    How to override a property set in an id (CSS)

    How to set fixed auto width in tab-content bootstrap?

    How to apply CSS to td of particular table using Classname? [duplicate]

    Force browsers load CSS before showing the page

    how to add a custom font to rails app

    How can I size these spans so that the pictures don't extend past them?

    how to set auto div height from ul/li elements variable height

    how to embed css in sass, or use + selector in sass?

    How to divide parent div's height between child divs

    How to align vertical elements as horizontal elements and shift to right side of the screen using CSS?

    How to do the right positioning of css elements?

    Showing ellipsis in CSS table-cell element

    How can I write more efficient CSS for the max-width

    How to overlap items in an unordered list using CSS?

    How to change font-awesome icon color when it is active

    How to Style Similar to an Exam Questi-n

    How to Change CSS direction property of the input field automaticly if the user can use an language rtl or ltr

    Flexbox used for equal height, however it is ignoring column width in grid system

    How to show a background image over foreground image using CSS

    How to place text/content below Navbar in CSS/HTML

    Anyone know how to create CSS rectangle with one corner chopped off?