Hintergrund der sich in breite und höhe anpasst - Support | Kriesi.at

Viewing 22 posts - 1 through 22 (of 22 total)

Author

Posts
May 12, 2014 at 6:37 pm #263428

simonac
Participant

Hallo,

ich versuche verzweifelt einen Seite anzulegen, bei der ich einen Hintergrundbild habe was sich in der Breite sowohl auch in der Höhe anpasst.

Das mit der Breite klappt ja aber die Höhe ist je nach Monitor immer unterschiedlich. Mal passt es mal kommt ein scrollbalken.

Wie kann ich es machen, das es immer 100% passt auch wenn sich dadurch das Bild ein wenig verzerrt?

Danke im voraus!

May 12, 2014 at 6:38 pm #263430

simonac
Participant

This reply has been marked as private.

May 12, 2014 at 7:03 pm #263456

Flikk
Participant

Hallo,

height: 100vh;

Sollte in allen modernen browsern funktionieren.
Versuch es mal mit:

`background-size: 100% 100vh;
background-size: 100% 100%;’

May 12, 2014 at 7:10 pm #263461

simonac
Participant

Also ich benutze für diese eine Seite die Slide-Show (volle Breite).

Funktioniert das damit auch? Und wie muss der code genau heissen? Kann ich ihn genau so wie er dort ist ins quick css schreiben?

Danke

May 12, 2014 at 7:27 pm #263465

Flikk
Participant

achso, es handelt sich um einen slider un keinen Hintergrund. funktioniert der fullscreen slider denn nicht?

May 12, 2014 at 7:30 pm #263468

simonac
Participant

Er funtioniert halt so wie ich es beschrieben habt. In der Breite natürlich immer angepasst nur das verhältnis passt in der breite nicht immer je nach monitor.

Und dafür brauchen ich eine Lösung da ich ein Bild habe was immer ganz dargestelt werden soll ohne scrollen bzw. das unten sich was wiederholt. Es soll also immer 100% in breite und höhe sein. Auch wenn es dadurch verzerrt wird.

May 13, 2014 at 5:48 am #263736

Ismael
Moderator

Hey!

Thank you for visiting the support forum!

@Flikk: Thanks for helping out! :)

@simonac: I would like to chime in but I don’t understand the language. Anyway, using google translate, from what I understand you wanted to create a page with background image. Maybe, this plugin will help: http://wordpress.org/plugins/wp-backgrounds-lite/

If you can explain this on english, we will be happy to provide a better solution.

Cheers!
Ismael

May 13, 2014 at 9:41 am #263820

simonac
Participant

Hi Ismael,

I want a kind of welcome page in which the image is fullscreen and not only the width but als the height is 100% / resposive.

Now i have the problem that depending which monitor size, i have s little scollbar/ to much image in the height.

Thanks Simon

May 13, 2014 at 4:24 pm #264015
Flikk
Participant
His request was “fullscreen background”
But after he said he is using a slider i thought what he wants is: http://kriesi.at/themes/enfold/homepage/home-v7-one-page-portfolio/

I guess a fullscreen background is what he really wants in the end. So the linked plugin should help.

Wenn du etwas wie das hier brauchst: http://css-tricks.com/examples/FullPageBackgroundImage/css-1.php
Dann kannst du das Plugin verwenden welches Ismael verlinkt hat: http://wordpress.org/plugins/wp-backgrounds-lite/

Du kannst es auch ohne plugin machen achtung, nicht mit jedem browser kompatibel:
```
html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
```
Zur Kompatibilität und anderen Möglichkeiten kannst du noch hier lesen: http://css-tricks.com/perfect-full-page-background-image/

Die komplizierten Lösungen welche eine höhere Kompatibilität bringen würden, sollten allerdings den support hier übersteigen.
Daher empfehle ich einfach das Plugin zu benutzen oder ältere browser nicht zu unterstützen.
May 14, 2014 at 4:47 am #264460

Ismael
Moderator

Hey!

@Flikk: Thanks Flikk! :)

@simonac: Do you mind providing us with a screenshot of what you really want? Please try the suggested plugin or do Flikk’s suggestion if you want.

Cheers!
Ismael

May 14, 2014 at 8:21 am #264531

simonac
Participant

I trie to explain again:

What i need is a fullscreen image – just for the welcome/ernty page
This is seperate from the rest of the website where another background is used.

( I tried the plugin, but it does not work as the default background image is still used even if i choose another in the page with this plugin.)

Therefore, i think i also can not use the code from flikk because it effekts all backgrounds evenf if the plugin would work for only this page, right?

So i want an image on this page, (which i can set a link for- to get to the homepage). I do not mattter if i use the slideshow full width or anything else.

Main thing is that the screen is 100% filled also in height on different monitor scales. ( Not 110% or so).

Thanks Simon

May 14, 2014 at 9:49 am #264551

Flikk
Participant

please be more specific or link a picture of what you want.

If i understand correctly you want something similar to this: http://kriesi.at/themes/enfold/homepage/home-v7-one-page-portfolio/

In addition:
– only 1 image (not sliding)
– no content below the image / slider
– If you click anywhere on the image you want to be directed to some kind of secondary front page?

Please be as specific as possible, like if you want the menu at the top or no menu on this page and stuff like that.

May 14, 2014 at 9:56 am #264552

simonac
Participant

Hi Flikk,

yes thats what i want.

May 14, 2014 at 10:22 am #264562

Flikk
Participant

with menu or without menu at the top?

May 14, 2014 at 10:24 am #264564

simonac
Participant

without menu. just the image which i can link

May 14, 2014 at 11:24 am #264578
Flikk
Participant
I would use the blank template you can choose when creating editing a page.

then:
CSS:
```
img.bg {
	/* Set rules to fill background */
	min-height: 100%;
	min-width: 1024px;
			
	/* Set up proportionate scaling */
	width: 100%;
	height: auto;
			
	/* Set up positioning */
	position: fixed;
	top: 0;
	left: 0;
}
		
@media screen and (max-width: 1024px){
	img.bg {
	left: 50%;
	margin-left: -512px; 
	}
}
```
And then for the page content HTML:
```
<a href="http://google.com"><img class="bg" src="http://yourwebsite.com/wp-content/uploads/2014/05/background.jpg"/></a>
```
But somehow it deletes tha class from <img >when i mouseover twice. result is a small image.
May 15, 2014 at 4:42 am #265065
Ismael
Moderator
Hi!

Thank you for using the theme!

Please create a page then set the template to Blank – No Header and the Layout Settings to No Footer, No Sidebar, No Header etc. Use a fairly large image for the background, 1900x1200px for example. You can use the body page id to modify elements on a specific page. In order to find the current page id, you can use firebug or google chrome’s inspect element. Look for the body class id. It looks something like this:

On the example above, the page id is page-id-734. Use that along with the object’s selector that you’re trying to modify. Something like this:
```
.page-id-734 #wrap_all {
background: url('IMAGE URL HERE') no-repeat;
background-size: cover;
}

.page-id-734 #main, .responsive .page-id-734 #main .main_color.container_wrap:first-child {
background: transparent !important;
}

.page-id-734 #main .container_wrap:first-child, .responsive .page-id-734 #main .main_color.container_wrap:first-child {
border: none !important;
}
```
Best regards,
Ismael
May 15, 2014 at 8:56 am #265182

simonac
Participant

Hi Ismael,

i am gonne try this.

I put the code in quick css right?

And how can i put a link on the image?

Thanks very much!

May 16, 2014 at 12:22 pm #265783
simonac
Participant
So i tried with no result. Only the original bg is visible.

I used this code in quick css:
```
.page-id-494 #wrap_all {
background: url('http://herzleuchten.co.at/wp-content/uploads/2014/05/startbild_herzleuchten_9.jpg') no-repeat;
background-size: cover;
}

.page-id-494 #main, .responsive .page-id-494 #main .main_color.container_wrap:first-child {
background: transparent !important;
}

.page-id-494 #main .container_wrap:first-child, .responsive .page-id-494 #main .main_color.container_wrap:first-child {
border: none !important;
}
```
I also tried
`.page-id-494 #wrap_all {
background: url(‘http://herzleuchten.co.at/wp-content/uploads/2014/05/startbild_herzleuchten_9.jpg’) no-repeat;
background-size: cover !important;
}`

Regards

Simon
- This reply was modified 10 years, 6 months ago by simonac. Reason: deleted URL
May 18, 2014 at 1:48 pm #266288

simonac
Participant

I I figured oud a code snipped in the quick css which blockes it.

Now i have the image on this testpage an there comes no scroll filed!

BUT the image still changes depending on the monitor size. ( Itestet on 17, 21, 22 ” …)

The original image has a white frame. Now, sometimes the lower frame is shown a little somtimes not at all.

Is there a way that the exact ralation i keept all the time? Even if it wraps/distorts the image?

Thanks!

May 19, 2014 at 2:20 am #266576
Ismael
Moderator
Hey!

Glad it is working now.

You can try this to resize the background image but it will surely distort the image:
```
.page-id-494 #wrap_all {
background: url('http://herzleuchten.co.at/wp-content/uploads/2014/05/startbild_herzleuchten_9.jpg') no-repeat;
background-size: 100% 100%;
}
```
Best regards,
Ismael
May 19, 2014 at 8:32 am #266662

simonac
Participant

Ismael you are the man!

Thank you guys for the awesome support.

Simon
Author

Posts

Viewing 22 posts - 1 through 22 (of 22 total)

The topic ‘Hintergrund der sich in breite und höhe anpasst’ is closed to new replies.