CSS: "Летяща" картинка върху цялата страница

kreten

kreten

New Member
Искам да накарам една картинка да застане в горния ляв ъгъл на twenty twelve като излиза извън границите на бялата кутия.

Значи искам да докарам ей туй

attachment.php

image3025.png
 
От: CSS: "Летяща" картинка върху цялата страница

Задаващ position: relative; и после си игреш с позиционирането.
 
От: CSS: "Летяща" картинка върху цялата страница

kreten каза:
Искам да накарам една картинка да застане в горния ляв ъгъл на twenty twelve като излиза извън границите на бялата кутия.

Значи искам да докарам ей туй

attachment.php

Виж файлът 6685
Увеличете...

га казваше даскалката учи бе иване , да не станеш КРЕТЕН
иванчо не га слушаше
 
От: От: CSS: "Летяща" картинка върху цялата страница

AMitrev каза:
Задаващ position: relative; и после си игреш с позиционирането.
Увеличете...

еми да де ама ходи като муха без глава на афон, таблет и прочее мобилни шитове. искам го респонсиве, пък нещо не мога да го наглася
 
От: CSS: "Летяща" картинка върху цялата страница

е да де ама ако вкарам картинката в белия див и си играя с маржините не мога да я изкарам над бялото пространство. на прост език - "реже" я

картинката трябва да е позиционирана в бодито непосредствено преди отварящия таг за

Начи е го хедъра, отбелязал съм ямстото къдеот трябва да я ръгна

PHP: 
<?php
/**
 * The Header for our theme.
 *
 * Displays all of the <head> section and everything up till <div id="main">
 *
 * @package WordPress
 * @subpackage Twenty_Twelve
 * @since Twenty Twelve 1.0
 */
?><!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 7) | !(IE 8)  ]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php // Loads HTML5 JavaScript file to add support for HTML5 elements in older IE versions. ?>
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->
<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
.............. СКАПАНАТА КАРТИНКА ТРЯБВА ДА ДОЙДЕ ТУК^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
<div id="page" class="hfeed site">
	<header id="masthead" class="site-header" role="banner">
		<hgroup>
			<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
			<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
		</hgroup>

		<nav id="site-navigation" class="main-navigation" role="navigation">
			<h3 class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></h3>
			<a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a>
			<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
		</nav><!-- #site-navigation -->

		<?php $header_image = get_header_image();
		if ( ! empty( $header_image ) ) : ?>
			<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php echo esc_url( $header_image ); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" /></a>
		<?php endif; ?>
	</header><!-- #masthead -->

	<div id="main" class="wrapper">
 
От: CSS: "Летяща" картинка върху цялата страница

Какво си пейстнал бе младеж :).

0. Сложи снимката в блока, който ти показва това бялото;
1. Задай на картинката position: relative;
2. Задай на картинката z-index: 1000;
3. Ако е нужно задай на body-то z-index: 0;
4. Играй си с позиционирането ;)
 
От: CSS: "Летяща" картинка върху цялата страница

Ей тоя CSS много те мъчи :D
leon5star каза:
га казваше даскалката учи бе иване , да не станеш КРЕТЕН
иванчо не га слушаше
Увеличете...
 
Бях казал, че повече няма да пиша .. но ме сърбят ръцете :)

Та за да го направиш това, добавяш следното след в header.php след <div id="page" class="hfeed site">, като съответно си го редактираш с пътя към твоята картинка. Т.е.:

PHP: 
<div id="page" class="hfeed site">
		<div class=ugly-picture>
		<img src="http://domain.com/wp-content/uploads/2013/06/picture.png" alt="Image alt">
		</div>

След това в style.css добавяш следното и го редактираш, спрямо размера на твоята картинка да се позиционира по-добре:

Код: 
.ugly-picture {
position: absolute;
margin-left: 850px;
margin-top: -50px;
}

Горното е за най-високата резолюция. След това добавяш същият стил навсякъде където имаш @media куерита и съответно редактираш позицията както желаеш:

Аз ползвам следният боокмарклет за хром за да тествам респонсив дизайните - http://lab.maltewassermann.com/viewport-resizer/ - завлачи го до буукмарк лентата и кликни на него като си на желаната страница. Ще ти излезе меню с предефинирани размери чрез които да се ориентираш къде да ти бъде снимката, макар че при респонсив дизайна бекграунда се кълца, така че трябва да покажеш снимката някъде в хедъра в дясно от логото. Примерно:

Та накратко, как изглежда стила който брулнах в дъното на style.css
Код: 
@media (min-width: 1200px) {
.ugly-picture {
position: absolute;
margin-left: 850px;
margin-top: -50px;
}}
@media (max-width: 1024px) {
.ugly-picture {
position: absolute;
margin-left: 700px;
margin-top: 0px;
}}
@media (max-width: 800px) {
.ugly-picture {
position: absolute;
margin-left: 500px;
margin-top: 0px;
}}
@media (max-width: 600px) {
.ugly-picture {
position: absolute;
margin-left: 300px;
margin-top: 0px;
}
}

Ако искаш да видиш как изглежда на един тестов сайт, драсни ми лс да ти пратя линк :)
Успех.

П.П. Имай предвид, че доста мобилни устройства използват различни pixel-ratio-s, така че не е лошо да погледнеш и това http://nmsdvid.com/snippets/
 
  • Like
Реакции: Sky
Само да добавя, че забравих. Ако искаш под някоя резолюция да не се показва, просто му добавяш display:none;, примерно

Код: 
@media (max-width: 600px) {
.ugly-picture {
display:none;
}
}
[/code
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Горе