for my joomla 3.x website i'm using a template based on the EF4 framework. I assigned width "5" to position top2-1 and "7" to position top2-2.
I wanted to create a custom html module for the homepage (http://francescaleso.com/it/) in position top2-1 to show a background image completely filling it.
I have tried as suggested on this site doing like this:
.homeimg {
overflow: hidden;
background-size: cover;
background-position: center;
background-image: url(/images/headers/home-image.jpg);
}
And the module only has
<div class="homeimg"></div>
The path of the image is correct, because if i try "open in new tab" it gets displayed correctly, however it won't show on my homepage.
Make these modifications in the CSS.
.homeimg {
background-size: cover;
background-position: center;
background-image: url(/images/headers/home-image.jpg);
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
----edit--- if i play a bit with absolute and relative positions, i get this:
the problem is that the image isn't the full height of the unscrolled space, and also has an unwanted padding or something on the left...
Related
I have a question, which I don't even know how to google. I set a two-row layout. On the left side is a container with a background image, which is fixed:
.image {
position: fixed;
z-index: 100;
top: 0;
left: 0;
width: 50%;
height: 100%;
background-image: url('/splash_1.png');
background-size: contain;
background-attachment: fixed;
}
This works so far so good. But when i scroll the page (in my case on my macbook with the trackpad) like a "swipe up" or "swipe down" (as done in mobiles to reload a page), the image scrolls too and leaves a white space.
To explain it better, I recorded the screen in following animated Gif:
Is there a way to prevent this from happening?
Try this CSS propert overscroll-behavior: contain;.
Source: https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior
I am trying to line up four background images to make up a side menu panel with four text links overlaying each. Presuming background-image is the best way to do this, I am applying the background image to each text area. What I'd like to know is, is there anyway I can get the background image to display full size so that I can then align my text to the correct place.
PAGE LINK: http://dbtest.destinationballybunion.ie/?page_id=4600
Here's the CSS I have tried applying to the first two text areas:
.boxera {
background-image: url('http://dbtest.destinationballybunion.ie/wp-content/uploads
/2014/11/NULEFT-A.png');
background-size: 100% 100%;
background-repeat: no-repeat;
}
.boxera p {
margin-top: 4.000em;
margin-right: 1.000em;
margin-left: 12.500em;
}
.boxerb {
background-image: url('http://dbtest.destinationballybunion.ie/wp-content/uploads
/2014/11/NULEFT-B.png');
background-size: 100% 100%;
background-repeat: no-repeat;
}
.boxerb {
position: absolute;
margin-top: -1.800em;
}
And the last two text areas I've tried putting in specific dimensions, but with the same result.
.boxerc {
background-image: url('http://dbtest.destinationballybunion.ie/wp-content/uploads
/2014/11/NULEFT-C.png');
background-size: 16.000em auto;
background-repeat: no-repeat;
}
.boxerc {
position: absolute;
margin-top: 12.500em;
}
.boxerd {
background-image: url('http://dbtest.destinationballybunion.ie/wp-content/uploads
/2014/11/NULEFT-D.png');
background-size: 29.688em 20.250em;
background-repeat: no-repeat;
}
.boxerd {
position: absolute;
margin-top: 26.500em;
}
Can anyone help me with this. I've tried looking this up, it all seems straightforward until I put it into practice!
I added height and width to boxera and it resized the image.
So for example
add the corresponding image sizes to:
div.wpb_text_column.wpb_content_element.boxera
div.wpb_text_column.wpb_content_element.boxerb
div.wpb_text_column.wpb_content_element.boxerc
div.wpb_text_column.wpb_content_element.boxerd
so for boxera
height:295px; width:475px;
This is the only way I can think of actually altering the background image as you've rapped it so deeply in divs. Unless as mentioned you strip it out of CSS and into some image tags thats the only other way around it I think.
I am using the Electoral template from ThemeForest here, this is the original template. I am trying to use CSS to fade out the edges of the blue image to the right, however the change is affecting the entire container. I've changed the background color to reflect the undesired behavior at the first link.
What I want to do is be able to apply CSS instructions to just the image. This is the section that controls the container:
#hero .q-container {
position: relative;
padding-top: 8%;
background-image: url(../img/sam.png);
background-repeat: no-repeat;
background-position: bottom 30% right 10%;
background-size: 30%;
}
I tried using the following but it didn't work:
#hero .q-container img {
background-color: red;
}
Does anyone have any ideas to fix this? Thanks!
I have this layout:
Code here: http://m6000225.ferozo.com/test/
I need the blue and brown image to lay below the main content div, and both be aligned regardless of the window width, both centered horizontally.
I implemented a css tip I read on this site, which is having a div with absolute position and left: 50% and an img inside with relative position and left: -50%.
It works fine, except for the fact that it pushes the page width to the right, as you can see in the screenshot, the scrollbar can be seen.
3rd party lib solutions like jQuery are welcome, but I'd prefer plain CSS.
PS: I also need something similar below the footer, but I guess using the same solution with a negative bottom value should work, right?
PS2: Extending the blue-brown strip to both borders of the window is no problem as I already used another div with absolute position and background-repeat: repeat-x.
The scroll bar is appearing because of the left: 50%; on the class .header-image. You should drop that altogether. Since that tag has a width set, when you push it over 50% it falls outside the window forcing the scroll bar to appear.
After you drop the left call, you should then set the width of that div to the width of the window, not a specific value in pixels. Use Width: 100%. So, that tag should look like:
.header-image {
height: 245px;
position: absolute;
top: 40px;
width: 100%;
z-index: -1;
}
After that, you'll need to re-center the image contained within the div. To do that, instead of using positions (which rely on set boundaries), give the element auto margins. Use :
.header-image img {
display: block;
margin-left: auto;
margin-right: auto;
}
That will recenter the image. Please let me know if this is what you were looking for!
Per Paulie_D's suggestion:
.header-image {
position:absolute;
z-index: -1;
top: 40px;
width: 100%;
height: 245px;
background-image: url('header.png');
background-position: center;
background-repeat: no-repeat;
}
That did it.
I'm looking to recreate an effect similiar to the popular science app. Basically have one big background image and then have HTML/CSS layer on top of that. When the user scrolls the content, then background-position of the image should remain in place, and not scroll.
Obviously in a 'regular' browser I would use background-attachment:fixed, but this doesn't seem to work on the ipad. I know position:fixed doesn't work as you might expect according to safari spec - but is there any way of achieving this?
You can use this code to make a fixed background layer to hack into this problem.
#background_wrap {
z-index: -1;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-size: 100%;
background-image: url('xx.jpg');
background-attachment: fixed;
}
And put <div id="background_wrap"></div> into <body></body>
<body>
<div id="background_wrap"></div>
</body>
Expanding on Anlai's answer above, I found that solution was repeating my image as I was scrolling rather than keeping it fixed. If anyone else had this problem my CSS for the background_wrap ID is as follows:
#background_wrap {
z-index: -1;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-size: cover;
background-image: url('../images/compressed/background-mobile.png');
background-repeat: no-repeat;
background-attachment: scroll;
}
Just changed the background size and background attachment to make the image static.
Mobile safari scales your whole site down to it's viewport size, including the background image. To achieve the correct effect, use the -webkit-background-size CSS property to declare your background size:
-webkit-background-size: 2650px 1440px;
(hat tip to commenter Mac)
I believe you can place the background image in a div and set the z-index to appear behind other content. Afterwards you can use javascript to fix the position of the div which contains the background image.
I'm not that profi one, but I've solved this problem usin' jquery.
It's quite simple)
Here is the code:
jQuery(window).scroll(function(){
var fromtop = jQuery(window).scrollTop();
jQuery(" your element ").css({"background-position-y": fromtop+"px"});
});
next solution in Css:
body {
background-image: url( ../images/fundobola.jpg );
background-position: top center;background-repeat:no-repeat;
background-size: 1900px 1104px;
overflow: -moz-scrollbars-vertical;
overflow-y: scroll;
}
--- not use---- (cause: scroll disable )
position: fixed
Resolved in Ipad and iPhone
Similar to Ig365, I found that Angolao's solution causes image repeat, depending on image proportions; however, Ig365's image doesn't mimic the placement of background-fixed . To do this, add a background-position-x: 50%;. (Depending on your image dimensions, you may also need background-position-y: 50%.)
#background_wrap {
z-index: -1;
position: fixed;
top: 0;
background-position-x: 50%;
height: 100%;
width: 100%;
background-size: cover;
background-image: url('imageURL');
background-repeat: no-repeat;
}